在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src='/images/loading.gif' data-original="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 7 </head> 8 <body> 9 <div id="app">10 a= {{a}},11 b={{b}},12 c={{c}}13 </div>14 <script>15 var vm=new Vue({16 el: '#app',17 data: {18 a:119 },20 computed:{21 b:function(){22 return this.a*201523 },24 c:function(){25 return this.b+this.a26 }27 } 28 });29 vm.a=2;30 </script>31 </body>32 </html>
在线:
https://jsfiddle.net/miloer/veL2bkbf/1/
computed
- 类型:
Object
- 详细:实例计算属性。getter 和 setter 的
this
自动地绑定到实例。 - 示例:
1 var vm = new Vue({ 2 data: { a: 1 }, 3 computed: { 4 // 仅读取,值只须为函数 5 aDouble: function () { 6 return this.a * 2 7 }, 8 // 读取和设置 9 aPlus: {10 get: function () {11 return this.a + 112 },13 set: function (v) {14 this.a = v - 115 }16 }17 }18 })19 vm.aPlus // -> 220 vm.aPlus = 321 vm.a // -> 222 vm.aDouble // -> 4
- 另见:
原标题:Vue#计算属性
关键词:VUE