vue computed

作者：▍看女人酒醒的疯癫。发布日期:2025-02-11 浏览:100

// Vue computed 示例代码

new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue!',
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: ''
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
    // 计算属性可以依赖于多个数据属性
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

// 解释说明：
// 1. `reversedMessage` 是一个计算属性，它会自动更新并返回 `message` 的反转字符串。
// 2. `fullName` 是另一个计算属性，它依赖于 `firstName` 和 `lastName`，当这两个属性变化时，`fullName` 也会自动更新。
// 3. 计算属性是基于它们的依赖进行缓存的，只有当依赖的数据发生变化时才会重新计算。

上一篇：vue.js

下一篇：ajax和vue