## 計算屬性和表單
### 計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
~~~html
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
~~~
在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。
所以，對于任何復雜邏輯，你都應當使用計算屬性。
~~~html
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
~~~
~~~javascript
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
~~~
### 表單和雙向數據綁定
你可以用 v-model 指令在表單 `<input>` 及 `<textarea>` 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。
v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
~~~html
<div>
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
</div>
~~~
~~~javascript
export default{
data(){
return{
msg:""
}
},
watch:{
msg:function(data){
if(data=="傻"){
console.log("想罵人？");
}else if(data == "傻x"){
console.log('你才x');
}
}
}
}
~~~
### 修飾符
**.lazy**
在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步：
~~~html
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >
~~~
**.number**
如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：
~~~html
<input v-model.number="age" type="number">
~~~
這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。
**.trim**
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：
~~~html
<input v-model.trim="msg">
~~~
