zoukankan      html  css  js  c++  java
  • Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <!-- vue中的计算属性和侦听器
            计算属性:
            computed:{}
            性能高,当依赖的数据没有发生变化时,不会重新加载
    
            侦听器:
            watch
         -->
    
        <div id="root">
            姓:<input v-model="firstname" />
            名:<input v-model="lastname" />
            <div>{{fullName}}</div>
            <div>{{count}}</div>
        </div>
        
        <script>
            new Vue({
                el:"#root",
                data:{
                    firstname:'',
                    lastname:'',
                    count: 0
                },
                computed:{
                    fullName: function() {
                        return this.firstname + ' ' + this.lastname
                    }
                },
                watch: {
                  firstname: function() {
                      this.count ++
                  },
                  lastname: function() {
                      this.count ++
                  },
                  fullName: function() {
                      this.count ++
                  }
                 }
            })
        </script>
    </body>
    </html>
    
  • 相关阅读:
    Liunx cal
    Liunx read
    IOS
    IOS
    ARPSpoofing教程(四)
    ARPSpoofing教程(三)
    ARPSpoofing教程(二)
    数据结构与算法分析
    hdu 2034
    hdu 2042
  • 原文地址:https://www.cnblogs.com/twodoge/p/10230107.html
Copyright © 2011-2022 走看看