你的位置:首页 > Java教程

[Java教程]Vue#计算属性


在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Document</title> 6   <script src="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

     

  • 另见:
    • 计算属性
    • 深入响应:计算属性