vue的computed简单使用

vue的computed简单使用

1.computed是个啥？

计算属性可以根据a变量延申出一个b变量，并且这个b变量可以根据a变量改变而改变。

2基本用法

这是一个根据vue和vant搭建的初始项目，只有一个加减器。点击加减按钮，data中的value都会随之加减。

<van-stepper v-model="value" />
...
data() {
  return {
       value:1,
   };
},

这时候有个div容器，里面存放一个新值。并且这个值会跟着value的值改变而改变。（比如是value的值加一。）

<div>{{val}}</div>

这时候我们可以在value中定义这个新变量，然后触发点击事件时，让val进行改变

data() {
   return {
        val:2
    };
},
...
methods: {
   newVal(){
       this.val = this.value + 1;
   }
},

这样写也可以达到我们想要的效果，如果用计算属性computed我们应该怎么写了？

一行代码就可以搞定

computed:{
    val(){
        return this.value + 1;
    },
},

并且用了计算属性，这时候我们都不需要在data中去定义这个新变量val,就可以直接使用。当value改变，val也会随之改变。

当然在这里你可以进行其他更复杂的操作，不只是加一这么简单。

谢谢阅读！