我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue监听属性和计算属性

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue监听属性和计算属性

一、watch监听属性

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

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

回调函数有2个参数:

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

计数器:


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script class="lazy" data-src="./js/vue.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
  })


1.

1.购物车


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script class="lazy" data-src="./js/vue.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;
}


2.全选与取消全选


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script class="lazy" data-src="./js/vue.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 class="lazy" data-src="./js/vue.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>

2.methods

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


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script class="lazy" data-src="./js/vue.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>

3.setter

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


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script class="lazy" data-src="./js/vue.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>

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue监听属性和计算属性

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue监听属性和计算属性怎么使用

这篇文章主要讲解了“Vue监听属性和计算属性怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue监听属性和计算属性怎么使用”吧!一、watch监听属性这个属性用来监视某个数据的变化,
2023-06-25

关于Vue中的计算属性和监听属性详解

这篇文章主要介绍了关于Vue中的计算属性和监听属性详解,Vue.js模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板内放入过长的或复杂的逻辑时,会让模板过重且难以维护,需要的朋友可以参考下
2023-05-20

Vue中的计算属性与监听属性怎么用

今天小编给大家分享一下Vue中的计算属性与监听属性怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、为什么要使用计算属
2023-06-29

Vue中监视属性和计算属性区别解析

这篇文章主要介绍了Vue中监视属性和计算属性区别,通过本文学习大家知道computed与watch配置项问题,computed能完成的功能,watch都可以完成,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
2022-11-13

Vue计算属性与监视(侦听)属性的使用深度学习

这篇文章主要介绍了Vue计算属性与监视(侦听)属性的使用,计算属性指的是通过一系列运算之后,最终得到一个值,watch监视(侦听)器允许开发者监视数据的变化,从而针对数据的变化做特定的操作,本文就这两种属性给大家详细讲解,感兴趣的朋友一起学习吧
2022-11-13

JavaScript计算属性与监视(侦听)属性的使用

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了计算属性与监视属性使用的相关内容,计算属性指的是通过一系列运算之后,最终得到的一个值,监视器允许开发者监视数据的变化,从而针对数据的变化做特定的操作;下面一起来看一下,希望对大家有帮助。
2023-05-14

Vue中监视属性和计算属性的区别是什么

这篇文章主要讲解了“Vue中监视属性和计算属性的区别是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中监视属性和计算属性的区别是什么”吧!计算属性顾名思义,计算属性就是计算出来的属
2023-07-04

Vue计算属性与监视属性详细分析使用

computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
2022-11-13

Vue中如何watch监听属性

这篇文章主要介绍了Vue中如何watch监听属性,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先要确认 watch是一个对象,要当成对象来使用。键:就是那个,你要监听的那个
2023-06-21

Vue中计算属性和侦听器怎么使用

本篇内容主要讲解“Vue中计算属性和侦听器怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中计算属性和侦听器怎么使用”吧!在Vue中通常我们会在模板绑定表达式,模板是用来描述视图结构
2023-06-03

Vue的计算属性

通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板的表达式存在过多的逻辑,就会变得臃肿不堪,可维护和可读性就会较差,因此,为了简化逻辑,当某个属性值依赖于其他属性的值时,就可以使用计算属性来看一个简单的计算属性的例子
2023-06-03

编程热搜

目录