vuejs计算属性和侦听器

<div id='root'>
  姓:<input v-model='firstName'/>
  名:<input v-model='secondName'/>
  <div>{{fullName}}</div>
  <div>{{count}}</div>
</div>
<script>
  new Vue({
    el:'#root',
    data:{
      firstName:'',
      secondName:'',
      count: 0
    },
    computed:{
      fullName:function(){
        return this.firstName + this.secondName
      }
    },
    watch: {
      firstName:function(){
        this.count ++;
      },
      secondName:function(){
        this.count ++
      }
    }
  })
</script>
计算属性:computed,一个属性是通过其他属性计算而来,这有一个好处,就是firstName和secondName没有变化的时候,fullName会使用上一次的缓存值,不会重新计算

侦听器:watch,去监听某一个数值的变化,一旦这个监听的数值发生了变化,就在侦听器里面处理业务逻辑

猜你喜欢

转载自www.cnblogs.com/wzndkj/p/9563698.html