首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Web前端学习 第7章 Vue基础教程5 计算属性与侦听器

一、计算属性

计算属性中定义的值可以直接绑定在表达式中。如果某些值需要通过计算才能得到,那使用计算属性就再合适不过了。

代码语言:javascript
复制
 1 <template>
 2     <div>
 3         <h1>{{fullTitle}}</h1>
 4         <h2>{{title}}</h2>
 5     </div>
 6 </template>
 7 
 8 export default {
 9     data(){
10         return {
11             title:"hello world"
12         }
13     },
14     computed:{
15         fullTitle(){
16             return "融职教育-" + this.title
17         }
18     }
19 }

在上面的示例代码中fullTitle的值是通过title属性计算而来,所以可以通过computed获得计算的结果,并绑定到表达式中。

但是这个例子并没有说服力,我们还可以用很多其他方法来实现这个功能,那我们再来制作一个计数器效果,让computed属性发挥它的作用。

代码语言:javascript
复制
 1 <template>
 2   <div id="app">
 3     <div>单价{{price}}</div>
 4     <div>
 5       <button @click="sub">-</button>
 6       <span>{{count}}</span>
 7       <button @click="add">+</button>
 8     </div>
 9     <div>总价:{{totalPrice}}</div>
10   </div>
11 </template>

我们在之前的实例中,在data属性中定义了三个变量:price、count、totalPrice。

利用计算属性可以简化这个示例:

代码语言:javascript
复制
 1 export default {
 2   name: 'app',
 3   data(){
 4     return {
 5       name:"xiaoming",
 6       count:0,
 7       price:15
 8     }
 9   },
10   computed:{
11     totalPrice(){
12       return this.count * this.price
13     }
14   },
15   methods:{
16     add(){
17       this.count++
18     },
19     sub(){
20       this.count--
21     }
22   }
23 }

二、侦听属性

侦听属性可以实时监控一个属性的变化,如果这个值发生变化了,可以执行某些操作,我们用侦听器来改写上面的计数器功能,示例代码如下所示

代码语言:javascript
复制
 1 export default {
 2   name: 'app',
 3   data(){
 4     return {
 5       name:"xiaoming",
 6       count:0,
 7       price:15
 8     }
 9   },
10   watch:{
11     count(newValue,oldValue){
12       console.log(newValue)
13       console.log(oldValue)
14       this.totalPrice = newValue * this.price
15     },
16   }, 
17   methods:{
18     add(){
19       this.count++
20     },
21     sub(){
22       this.count--
23     }
24   }
25 }

三、计算属性与侦听属性对比

如果关注的是一个变量的结果,使用计算属性;如果关注一个变量的改变会导致一系列行为,使用侦听属性。

下一篇
举报
领券