×

Vue开发:监听属性和计算属性

作者:Web前端之家2022.03.23来源:Web前端之家浏览:990评论:0
关键词:vuejs
微信公众号

微信公众号

Vue开发:监听属性和计算属性。

watch监听属性

这个属性用来监视某个数据的变化,并触发相应的回调函数执行。

基本用法添加watch属性,值为一个对象。对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行。

回调函数有2个参数:

  • newVal,数据发生改变后的值。

  • oldVal,数据发生改变前的值。

计数器:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <div>计数器{{ shu }}</div>
   <span>改变前: {{ov}}</span>
   <span>改变后: {{nv}}</span>
   <br />
   <button @click="shu++">加一</button>
  </div>
  
  <script>
  var vm = new Vue({
   el: '#app',
   data: {
    shu:1,
    ov:0,
    nv:0
   },
   methods:{
    
   }
  })
  vm.$watch("shu",function(nval,oval){
   vm.$data.ov = oval
   vm.$data.nv = nval
  })
  </script>
 </body>
</html>

添加监听,同时将计数器改变前的值赋值给变量ov,将改变后的值赋值给变量nv。

vm.$watch("shu",function(nval,oval){
 vm.$data.ov = oval
 vm.$data.nv = nval
})

购物车

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
  <table>
   <tr>
    <th>序号</th>
    <th>商品名称</th>
    <th>商品价格</th>
    <th>购买数量</th>
    <th>操作</th>
   </tr>
   <tr v-for="sp in sps">
    <td>{{ sp.id }}</td>
    <td>{{ sp.name }}</td>
    <td>{{ sp.money }}</td>
    <td>
    <button v-on:click="sp.sum=sp.sum-1">-</button>
    {{ sp.sum }}
    <button v-on:click="sp.sum=sp.sum+1">+</button>
    </td>
    <td>
     <button v-on:click="sp.sum=0">重置</button>
    </td>
   </tr>
  </table>
  <div >
   总价:{{ getmaney() }}
  </div>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     sps:[
      {
       id:1,
       name:"苹果13",
       money:6000,
       sum:1
      },
      {
       id:2,
       name:"苹果12",
       money:5000,
       sum:1
      },
      {
       id:3,
       name:"苹果11",
       money:4000,
       sum:1
      }
     ]
    },
    methods:{
     getmaney:function(){
      var m=0;
      for(var x=0;x<this.sps.length;x++){
       m=m+this.sps[x].money*this.sps[x].sum;
      }
      return m;
     }
    }
   })
  </script>
 </body>
</html>

得出总的费用:

getmaney:function(){
    var m=0;
    for(var x=0;x<this.sps.length;x++){
   m=m+this.sps[x].money*this.sps[x].sum;
 }
 return m;
}

全选与取消全选

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <input type="checkbox" id="a" value="a" v-model="che"/>
   <label for="a">a</label>
   <input type="checkbox" id="b" value="b" v-model="che"/>
   <label for="b">b</label>
   <input type="checkbox" v-model="checked" id="bok" v-on:change="ckall()" />
   <label for="box">全选</label>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     checked:false,
     che:[],
     shuzu:["a","b"]
    },
    methods:{
     ckall:function(){
      //全选状态
      if(this.checked){
       this.che = this.shuzu
      }else{
       //取消全选
       this.che=[]
      }
     }
    },
    watch:{
     "che":function(){
      //判断是否全选
      if(this.che.length == this.shuzu.length){
       this.checked=true
      }else{
       this.checked=false
      }
     }
    }
   })
  </script>
 </body>
</html>

计算属性

1.computed

特点:

  • computed属性对象中定义计算属性的方法,在页面上使用{{方法名}}来显示计算结果。

  • 通过getter/setter来显示和监视属性数据。

  • 计算属性存在缓存,多次读取只执行一次getter

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <p>{{ mess }}</p>
   <p>{{ remess }}</p>
   <p>{{ mess.split('').reverse().join('') }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data:{
     mess:'abcd'
    },
    computed: {
     remess:function(){
      return this.mess.split('').reverse().join('')
     }
    }
   })
  </script>
 </body>
</html>

methods

computed基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用methods,在重新渲染的时候,函数总会重新调用执行。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <input v-model="mess" />
   <p>{{ mess }}</p>
   <p>{{ remess }}</p>
   <p>{{ remess2() }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data:{
     mess:'abcd'
    },
    computed: {
     remess:function(){
      return this.mess.split('').reverse().join('')
     }
    },
    methods: {
     remess2:function(){
      return this.mess.split('').reverse().join('')
     }
    }
   })
  </script>
 </body>
</html>

setter

当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里获取数据时会自动执行get方法,同时也提供了set方法。computed属性默认只有getter,不过在需要时也可以提供一个setter。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
   <p>{{ site }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     name: 'xiaowang',
     cls:'01'
    },
    computed:{
     site:{
      get: function(){
       return this.name+' '+this.cls
      },
      set: function(Value){
       var names = Value.split('|')
       this.name = names[0]
       this.cls = names[1]
      }
     }
    }
   })
   vm.site = 'xiaowang|01';
   document.write('name:'+vm.name);
   document.write('<br>');
   document.write('class:'+vm.cls);
  </script>
 </body>
</html>

试试吧!

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20220323a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2