zoukankan      html  css  js  c++  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:1
    19     },
    20     computed:{
    21      b:function(){
    22        return this.a*2015
    23      },
    24      c:function(){
    25      return this.b+this.a
    26      }
    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 + 1
      12       },
      13       set: function (v) {
      14         this.a = v - 1
      15       }
      16     }
      17   }
      18 })
      19 vm.aPlus   // -> 2
      20 vm.aPlus = 3
      21 vm.a       // -> 2
      22 vm.aDouble // -> 4
    • 另见:
  • 相关阅读:
    闭包
    线程与进程
    异常处理
    socket编程
    面向对象编程
    模块
    正则表达式
    递归、二分查找、冒泡算法
    装饰器
    迭代器与生成器
  • 原文地址:https://www.cnblogs.com/moustache/p/5445647.html
Copyright © 2011-2022 走看看