computed实战用法

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。代码如下：

{{message.split('').reverse().join('')}}
data(){
      return {
         message:"abcdefg"
      }
}

使用computed计算属性，代码示例如下：

<div id="app" v-cloak>
      <div>翻转前：{{message}}</div>
      <div>翻转后：{{reverseMessage}}</div>
</div>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			message:"abcdefg"
            		}
        		},
        		computed:{
			//这里使用了计算属性的getter属性
            			reverseMessage(){
                			return this.message.split('').reverse().join('')
            			}
        		}
    	})
</script>

一般情况下，我们只是使用了computed中的getter属性，默认只有 getter，因此不能直接修改计算属性，如果想要修改，可以使用setter属性。代码如下：

<input type="text" v-model="newName" />{{newName}}
computed:{
            	newName:{
                	//getter
                	get(){
                    		return this.name;
                	},
                	//setter
                	set(val){
//val的值为input输入框输入的值
                    		this.name=val;
                	}
            	}
        }