Vue计算属性

计算属性

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

<div id="example">
        <input type="text" v-model="aaa">
        <input type="text" v-model="bbb">
        <br>
        aaa={{aaa}},bbb={{bbb}},aaabbb={{aaabbb}}
</div>
<script>
	var vm = new Vue({
        	el:'#example',
        	data:{
            		aaa:'aaa',
            		bbb:'bbb'
        	},
        	computed:{
            		<!-- 一个计算属性的getter -->
            		aaabbb:function(){
                		<!-- this指向vm实例 -->
                		return this.aaa+this.bbb
            		}
        	}
    	})
</script>

当vm.aaa和vm.bbb的值发生变化时，vm.aaabbb的值会自动更新，并且会自动同步更新DOM部分。
前面实例只提供了getter，实际上除了getter。我们还可以设置计算属性的setter。代码示例如下:

<div id="example">
        <input type="text" v-model="aaa">
        <input type="text" v-model="bbb">
        <br>
        aaa={{aaa}},bbb={{bbb}},aaabbb={{aaabbb}}
</div>
<script>
    	var vm = new Vue({
        	el:'#example',
        	data:{
            		aaa:'aaa',
            		bbb:'bbb'
        	},
        	computed:{
            		<!-- 一个计算属性的getter -->
            		aaabbb:function(){
                		get:function(){
                    			<!-- this指向vm实例 -->
                    			return this.aaa+this.bbb
                		},
                		<!-- 一个计算属性的setter -->
                		set:function(newVal){
                   			var names = newVal.split('')
                    			this.aaa = names[0]
                    			this.aaa = names[1]
                		}
            		}
        	}
    	})
</script>

当设置vm.aaabbb的值时，vm.aaa和vm.bbb的值也会自动更新。