表單輸入綁定
不用v-model的情況下實現(xiàn)雙向綁定（v-on跃须、v-bind）
v-bind 將數(shù)據(jù)綁定到DOM節(jié)點上
v-on 數(shù)據(jù)改變炮沐，觸發(fā)事件，將DOM節(jié)點上的數(shù)據(jù)綁定到j(luò)s數(shù)據(jù)上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:input="input" v-bind:value="value"/>
<input type="text" v-on:input="input2" value="初始值"/>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
value: 'chen',
},
methods: {
input : function(event){
//IE 沒有target只有srcElement Firefox正好相反
let target = event.target || event.srcElement;
this.value = target.value;
//value的值變化時會重新刷新視圖 因此實現(xiàn)了雙向綁定
},
input2 : function(event){
let target = event.target || event.srcElement;
console.log(target.value);
/*
* value 屬性為 input 元素設(shè)定值回怜。
* type="text", "password", "hidden" - 定義輸入字段的初始值
*
* 當(dāng)input框中的內(nèi)容有變化時target.value的值會變,但是檢查元素時value的值還是初始值
*/
}
}
});
</script>
</body>
</html>
雙向綁定 ：v-model
<input v-model="searchText" />
<!-- 相當(dāng)于 -->
<input v-bind:value="searchText"
v-on:input="searchText = $event.target.value" />
<div id="app">
{{ value }} typeof {{ typeof value}}
<input type="text" v-model="input" value="value"/>
注意： v-model 會忽略所有表單元素的 value大年、checked、selected 特性的初始值
而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源玉雾。你應(yīng)該通過 JavaScript 在組件的 data 選項中聲明初始值翔试。
</div>
<script>
const app = new Vue(
el: "#app",
data: {
value: 'chen',
},
});
</script>
注意：對于需要使用輸入法 (如中文、日文复旬、韓文等) 的語言垦缅，你會發(fā)現(xiàn)
v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程驹碍，請使用 input 事件壁涎。如圖：
image.png
修飾符
- 1、.lazy
在默認(rèn)情況下志秃，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了輸入法組合文字時)怔球。你可以添加lazy修飾符，從而轉(zhuǎn)變?yōu)槭褂?change事件進(jìn)行同步(input框的change事件是input 框內(nèi)容變化 浮还，失去焦點的時候才會觸發(fā)竟坛；)：
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >
- 2、.number
如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型钧舌，可以給 v-model 添加 number 修飾符：
<input v-model.number="age" type="number">
這通常很有用担汤，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串洼冻。如果這個值無法被 parseFloat() 解析崭歧，則會返回 原始 的值。
- 2撞牢、.trim
如果要自動過濾用戶輸入的首尾空白字符率碾，可以給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
