vue中计算属性和侦听属性

阿姐y

于 2020-03-26 10:19:42 发布

阅读量140

点赞数

文章标签： javascript css vue.js

本文链接：https://blog.youkuaiyun.com/qrbd4558/article/details/105111543

版权

本文详细介绍了Vue.js中的计算属性和侦听属性的使用方法。计算属性允许基于多个输入创建缓存的输出，提高应用效率；而侦听属性则用于响应数据变化并执行特定操作，如更新依赖数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性
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
    }
  }
})