vue中计算属性和侦听属性

最新推荐文章于 2024-01-22 05:56:50 发布

阿姐y

最新推荐文章于 2024-01-22 05:56:50 发布

阅读量121

点赞数

文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/qrbd4558/article/details/105111543

版权

计算属性
compute是多个输入一个输出。计算属性和方法不同的是计算属性会有缓存，当计算属性里面的变量不发生变化就会调用缓存而不是在执行一遍，例子：当你的table有一列工资。该列对应的值就可以是endSalary。

var vm = new Vue({
  el: '#demo',
  data: {
    basicSalary: 2000,
    tax: 200
  },
  computed: {
    endSalary: function () {
      return this.basicSalary  -  this.tax;
    }
  }
})

侦听属性
watch 当侦听的属性firstName发生变化，其侦听属性对应的方法就会执行，对应的fullName也会发生变化。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})