Vue 计算属性(computed)的基本使用

使用方式一

<div id="app">	
	<div>
	str1：{{leftStr}}, str2：{{rightStr}}
	</div>
	<p>
	<!-- 使用计算属性 -->
	str：{{str}}
 	</p>
</div>
<script>
var vm = new Vue({
	el: "#app",
	data: {
          		leftStr: "a",
          		rightStr: "bc",
        	},
        	computed: {
          		str: {
          		   //计算属性获取时调用
          		   get() {
          		     return this.leftStr+ "-" + this.rightStr;
          		   },
          		   //计算属性修改时调用
          		   set(val){
          		     this.leftStr = val[0];
          		     this.rightStr = val.substr(1);
          		   }
          		}
        	},
})
</script>

使用方式二

<div id="app">	
	<div>
	str1：{{leftStr}}, str2：{{rightStr}}
	</div>
	<p>
	<!-- 使用计算属性 -->
	str：{{str}}
 	</p>
</div>
<script>
var vm = new Vue({
	el: "#app",
	data: {
          		leftStr: "a",
          		rightStr: "bc",
        	},
        	computed: {
          		//计算属性获取时调用
         	 	str() {
            			return this.leftStr + this.rightStr;
          		},
        	},
})
</script>