初识vue.js，我的学习之路（二）

   Vue计算属性

   vue在花括号之内也是可以写逻辑代码的，例：

<div id="app">

    {{ message.split('').reverse().join('') }}
    {{ message.split('').reverse().join('') }}
    {{ message.split('').reverse().join('') }}
    {{ message.split('').reverse().join('') }}
    {{ message.split('').reverse().join('') }}

</div>
<script src="vue.js"></script>
<script>

    new Vue({
        el:"#app",
        data:{

            message:"这是一个message"

        }
    })

</script>

   花括号内放入大量逻辑代码就会过重且难以维护，所以这时便要用到我们的计算属性 computed。

<div id="app">

    <p>{{message}}</p>
    <p>{{b}}</p>

</div>
<script src="vue.js"></script>
<script>   
    //基本写法，默认走的是get
   var vm = new Vue({
        el:"#app",
        data:{

            message:"这是一个message"

        },
        computed:{
               
            b:function(){ //要把b看做一个属性

                return this.message;
               
            }
        }                                                     
   });               
    console.log(vm.message);
    console.log(vm.b);                                   
</script>

    注意的是在这里面要把b看做是一个属性，而不是一个函数，上面这种写法默认走的是get，下面还有一种完整写法，完整写法会用到 get 和 set 两个方法，读get，写set。

 var vm = new Vue({
        el:"#app",
        data:{

            a:8

        },
        computed:{

            b:{

                get:function(){

                    return this.a+2;

                },
                set:function(val){

                   this.a = val;
                  console.log(val)
                }

            }
        }
    });
    window.onclick = function(){
        vm.b = 200;
    }

     get 只能读到 a 的值却无法修改，通过上面的代码我们可以看到，使用了 set，给 set 一个 val 的参数，而这个 val 就是 全局的 new 出来的 vue 的属性 b 的值，this.a=val ,也就是this.a=200，所以当触发了窗口的 onclick 事件后，页面会输出出 200 和202，通过这么一个方法我们达到了修改 a 的值的目的，这就是我们的计算属性。