Vue.js 基本范例

示例

模板

<div id="example">
  a={{ a }}, b={{ b }}
</div>

的JavaScript

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 计算的吸气剂
    b: function () {
      // “ this”指向虚拟机实例
      returnthis.a+ 1
    }
  }
})

结果

a=1, b=2

在这里,我们声明了一个计算属性b。我们提供的函数将用作该属性的getter函数vm.b:

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

的值vm.b始终取决于的值vm.a。

您可以将数据绑定到模板中的计算属性,就像普通属性一样。Vue公司意识到,vm.b取决于vm.a,所以它会更新依赖于任何绑定vm.b时vm.a的变化。