耀极客论坛

 找回密码
 立即注册
查看: 529|回复: 0

Vue监听属性和计算属性

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:33:27 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了Vue监听属性和计算属性,基本用法添加watch属性,值为一个对象。对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行,下面来看详细内容,需要的朋友也可以参考一下

一、watch监听属性

  这个属性用来监视某个数据的变化,并触发相应的回调函数执行。
  基本用法添加watch属性,值为一个对象。对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行。
  回调函数有2个参数:
       
  • newVal,数据发生改变后的值。   
  • oldVal,数据发生改变前的值。
  计数器:
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.   ‹meta charset="utf-8" />
  5.   ‹title>‹/title>
  6.   ‹script src="./js/vue.js">‹/script>
  7. ‹/head>
  8. ‹body>
  9.   ‹div id="app">
  10.    ‹div>计数器{{ shu }}‹/div>
  11.    ‹span>改变前: {{ov}}‹/span>
  12.    ‹span>改变后: {{nv}}‹/span>
  13.    ‹br />
  14.    ‹button @click="shu++">加一‹/button>
  15.   ‹/div>
  16.   
  17.   ‹script>
  18.   var vm = new Vue({
  19.    el: '#app',
  20.    data: {
  21.     shu:1,
  22.     ov:0,
  23.     nv:0
  24.    },
  25.    methods:{
  26.    
  27.    }
  28.   })
  29.   vm.$watch("shu",function(nval,oval){
  30.    vm.$data.ov = oval
  31.    vm.$data.nv = nval
  32.   })
  33.   ‹/script>
  34. ‹/body>
  35. ‹/html>
复制代码
  添加监听,同时将计数器改变前的值赋值给变量ov,将改变后的值赋值给变量nv
  1.   vm.$watch("shu",function(nval,oval){
  2.    vm.$data.ov = oval
  3.    vm.$data.nv = nval
  4.   })
复制代码
1.


1.购物车
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.   ‹meta charset="utf-8">
  5.   ‹title>‹/title>
  6.   ‹script src="./js/vue.js">‹/script>
  7. ‹/head>
  8. ‹body>
  9.   ‹div id="app">
  10.   ‹table>
  11.    ‹tr>
  12.     ‹th>序号‹/th>
  13.     ‹th>商品名称‹/th>
  14.     ‹th>商品价格‹/th>
  15.     ‹th>购买数量‹/th>
  16.     ‹th>操作‹/th>
  17.    ‹/tr>
  18.    ‹tr v-for="sp in sps">
  19.     ‹td>{{ sp.id }}‹/td>
  20.     ‹td>{{ sp.name }}‹/td>
  21.     ‹td>{{ sp.money }}‹/td>
  22.     ‹td>
  23.     ‹button v-on:click="sp.sum=sp.sum-1">-‹/button>
  24.     {{ sp.sum }}
  25.     ‹button v-on:click="sp.sum=sp.sum+1">+‹/button>
  26.     ‹/td>
  27.     ‹td>
  28.      ‹button v-on:click="sp.sum=0">重置‹/button>
  29.     ‹/td>
  30.    ‹/tr>
  31.   ‹/table>
  32.   ‹div >
  33.    总价:{{ getmaney() }}
  34.   ‹/div>
  35.   ‹/div>
  36.   ‹script>
  37.    var vm = new Vue({
  38.     el: '#app',
  39.     data: {
  40.      sps:[
  41.       {
  42.        id:1,
  43.        name:"苹果13",
  44.        money:6000,
  45.        sum:1
  46.       },
  47.       {
  48.        id:2,
  49.        name:"苹果12",
  50.        money:5000,
  51.        sum:1
  52.       },
  53.       {
  54.        id:3,
  55.        name:"苹果11",
  56.        money:4000,
  57.        sum:1
  58.       }
  59.      ]
  60.     },
  61.     methods:{
  62.      getmaney:function(){
  63.       var m=0;
  64.       for(var x=0;x‹this.sps.length;x++){
  65.        m=m+this.sps[x].money*this.sps[x].sum;
  66.       }
  67.       return m;
  68.      }
  69.     }
  70.    })
  71.   ‹/script>
  72. ‹/body>
  73. ‹/html>
复制代码

  得出总的费用:
  1. getmaney:function(){
  2.     var m=0;
  3.     for(var x=0;x‹this.sps.length;x++){
  4.    m=m+this.sps[x].money*this.sps[x].sum;
  5. }
  6. return m;
  7. }
复制代码
2.全选与取消全选
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.   ‹meta charset="utf-8">
  5.   ‹title>‹/title>
  6.   ‹script src="./js/vue.js">‹/script>
  7. ‹/head>
  8. ‹body>
  9.   ‹div id="app">
  10.    ‹input type="checkbox" id="a" value="a" v-model="che"/>
  11.    ‹label for="a">a‹/label>
  12.    ‹input type="checkbox" id="b" value="b" v-model="che"/>
  13.    ‹label for="b">b‹/label>
  14.    ‹input type="checkbox" v-model="checked" id="bok" v-on:change="ckall()" />
  15.    ‹label for="box">全选‹/label>
  16.   ‹/div>
  17.   ‹script>
  18.    var vm = new Vue({
  19.     el: '#app',
  20.     data: {
  21.      checked:false,
  22.      che:[],
  23.      shuzu:["a","b"]
  24.     },
  25.     methods:{
  26.      ckall:function(){
  27.       //全选状态
  28.       if(this.checked){
  29.        this.che = this.shuzu
  30.       }else{
  31.        //取消全选
  32.        this.che=[]
  33.       }
  34.      }
  35.     },
  36.     watch:{
  37.      "che":function(){
  38.       //判断是否全选
  39.       if(this.che.length == this.shuzu.length){
  40.        this.checked=true
  41.       }else{
  42.        this.checked=false
  43.       }
  44.      }
  45.     }
  46.    })
  47.   ‹/script>
  48. ‹/body>
  49. ‹/html>
复制代码


二、计算属性


1.computed

  特点:
       
  • 在computed属性对象中定义计算属性的方法,在页面上使用{{方法名}}来显示计算结果。   
  • 通过getter/setter来显示和监视属性数据。   
  • 计算属性存在缓存,多次读取只执行一次getter。
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.   ‹meta charset="utf-8">
  5.   ‹title>‹/title>
  6.   ‹script src="./js/vue.js">‹/script>
  7. ‹/head>
  8. ‹body>
  9.   ‹div id="app">
  10.    ‹p>{{ mess }}‹/p>
  11.    ‹p>{{ remess }}‹/p>
  12.    ‹p>{{ mess.split('').reverse().join('') }}‹/p>
  13.   ‹/div>
  14.   ‹script>
  15.    var vm = new Vue({
  16.     el: '#app',
  17.     data:{
  18.      mess:'abcd'
  19.     },
  20.     computed: {
  21.      remess:function(){
  22.       return this.mess.split('').reverse().join('')
  23.      }
  24.     }
  25.    })
  26.   ‹/script>
  27. ‹/body>
  28. ‹/html>
复制代码


2.methods

  computed基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用methods,在重新渲染的时候,函数总会重新调用执行。
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.   ‹meta charset="utf-8">
  5.   ‹title>‹/title>
  6.   ‹script src="./js/vue.js">‹/script>
  7. ‹/head>
  8. ‹body>
  9.   ‹div id="app">
  10.    ‹input v-model="mess" />
  11.    ‹p>{{ mess }}‹/p>
  12.    ‹p>{{ remess }}‹/p>
  13.    ‹p>{{ remess2() }}‹/p>
  14.   ‹/div>
  15.   ‹script>
  16.    var vm = new Vue({
  17.     el: '#app',
  18.     data:{
  19.      mess:'abcd'
  20.     },
  21.     computed: {
  22.      remess:function(){
  23.       return this.mess.split('').reverse().join('')
  24.      }
  25.     },
  26.     methods: {
  27.      remess2:function(){
  28.       return this.mess.split('').reverse().join('')
  29.      }
  30.     }
  31.    })
  32.   ‹/script>
  33. ‹/body>
  34. ‹/html>
复制代码


3.setter

  当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里获取数据时会自动执行get方法,同时也提供了set方法。computed属性默认只有getter,不过在需要时也可以提供一个setter。
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4.   ‹meta charset="utf-8">
  5.   ‹title>‹/title>
  6.   ‹script src="./js/vue.js">‹/script>
  7. ‹/head>
  8. ‹body>
  9.   ‹div id="app">
  10.    ‹p>{{ site }}‹/p>
  11.   ‹/div>
  12.   ‹script>
  13.    var vm = new Vue({
  14.     el: '#app',
  15.     data: {
  16.      name: 'xiaowang',
  17.      cls:'01'
  18.     },
  19.     computed:{
  20.      site:{
  21.       get: function(){
  22.        return this.name+' '+this.cls
  23.       },
  24.       set: function(Value){
  25.        var names = Value.split('|')
  26.        this.name = names[0]
  27.        this.cls = names[1]
  28.       }
  29.      }
  30.     }
  31.    })
  32.    vm.site = 'xiaowang|01';
  33.    document.write('name:'+vm.name);
  34.    document.write('‹br>');
  35.    document.write('class:'+vm.cls);
  36.   ‹/script>
  37. ‹/body>
  38. ‹/html>
复制代码

  到此这篇关于Vue监听属性和计算属性的文章就介绍到这了,更多相关Vue监听和计算属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:58 , Processed in 0.071321 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表