v-model表單輸入繫結
阿新 • • 發佈：2018-12-28
基礎用法
可以使用v-model指令在表單,及元素上建立雙向資料繫結，他會根據控制型別自動選取正確的方法來更新元素，v-model負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。
注：v-model會忽略所有表單元素的value,checked,selected特性的初始值，而總是將vue例項的資料作為資料來源，你應該通過js在元件的data選項中宣告初始值。
對於需要使用輸入法的語言（如中文，日文），你會發現v-model不會在輸入法組合文字過程中得到更新，如果你想處理這個過程，請使用input事件。
程式碼如下：
<template> <div> <!-- 通過v-model繫結一個變數在input上，當input中的值發生改變時，span中的值也會發生變數--> <input type="text" v-model="mes"> <span>Input輸入的內容是：{{mes}}</span> </div> </template> <script> export default { data() { return { mes: "" }; } }; </script>
單個複選框
單個複選框，繫結到布林值：
程式碼如下：
<template>
<div>
<!-- 新建一個複選框，使用v-model進行繫結 -->
<input type="checkbox" v-model="checked">
<!-- 當複選框變化時，label中的資料也會跟著變化 -->
<label>{{checked}}</label>
</div>
</template>
<script>
export default 
多個複選框checkbox
如果是多個複選框，可以繫結到同一個陣列中：
<template>
<div class="main">
<ul>
<li>
<label>lisa</label>
<!-- 如果當前input被選中時，它是true，它的值value是“lisa”，此時會把它的值value新增到checkedNames中 -->
<input type="checkbox" value="lisa" v-model="checkedNames">
</li>
<li>
<label>jack</label>
<input type="checkbox" value="jack" v-model="checkedNames">
</li>
<li>
<label>coco</label>
<input type="checkbox" value="coco" v-model="checkedNames">
</li>
<li>
<label>ann</label>
<input type="checkbox" value="ann" v-model="checkedNames">
</li>
<li>
<label>lucy</label>
<input type="checkbox" value="lucy" v-model="checkedNames">
</li>
</ul>
<p>選擇的是：{{checkedNames}}</p>
</div>
</template>
<script>
export default {
data() {
return {
checkedNames: []
};
}
};
</script>
單選按鈕：
<template>
<div class="main">
<ul>
<li>
<label>One</label>
<input type="radio" id="one" value="One" v-model="picked">
</li>
<li>
<label>Two</label>
<input type="radio" id="two" value="Two" v-model="picked">
</li>
<li>
<label>Three</label>
<input type="radio" id="three" value="Three" v-model="picked">
</li>
</ul>
<p>選擇的是:{{picked}}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: ""
};
}
};
</script>
下拉選單選擇框
<template>
<div class="main">
<!-- 為下拉選單設定v-model，選擇某一項的時候，就把某一項的值傳給selected -->
<select v-model="selected">
<!-- disable用來禁用某一個option -->
<option disabled value>--請選擇--</option>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
</select>
<p>選擇的是:{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: ""
};
}
};
</script>
如果v-model表示式的初始值未能匹配任何選項，元素將被渲染為“未選中”狀態，在IOS中，這會使使用者無法選中第一個選項，因為這樣的情況下，IOS不會觸發change事件，因為更推薦像上面這樣提供一個值為空的禁用選項。
多選下拉選單
下拉選單多選，多選時，繫結到一個數組：
程式碼如下：
<template>
<div class="main">
<select v-model="selected" multiple style="width:150px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>選擇的是:{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: []
};
}
};
</script>
使用v-for渲染動態選項
程式碼如下：
<template>
<div class="main">
<select v-model="selected">
<option v-for="(item,index) in items" :key="index" :value="item.title">{{item.text}}</option>
</select>
<p>當前選擇：{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: "A", //預設選擇第一個value值
//items是一個數組，陣列中是3個物件
items: [
{ text: "apple", title: "A" },
{ text: "pear", title: "B" },
{ text: "orange", title: "C" }
]
};
}
};
</script>
值繫結
對於單選按鈕，複選框及選擇框的選項，v-model繫結的值通常是靜態字串（對於複選框也可以是布林值）
程式碼如下：
<template>
<div class="main">
<!-- 當選中單選按鈕後，picked的值為a -->
<input type="radio" v-model="picked" value="a">
<p>選擇值是{{picked}}</p>
<!-- 當選擇複選框後，toggle的值為true或false -->
<input type="checkbox" v-model="toggle">
<p>選擇值是：{{toggle}}</p>
<!-- 當選擇下拉選單後，selected的值為option的value的值 -->
<select v-model="selected">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<p>選擇值是：{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: "",
toggle: "",
selected: ""
};
}
};
</script>
但是有時我們可能想把值繫結到vue例項的一個動態屬性上，這時可以用v-bind實現，並且這個屬性的值可以不是字串。
例如：複選框
<template>
<div class="main">
<input type="checkbox" v-model="sel" true-value="選中" false-value="未選中">
<p>選擇值是：{{sel}}</p>
</div>
</template>
<script>
export default {
data() {
return {
sel: "未選中"
};
}
};
</script>
當複選框選中時，會把true-value的值傳給v-model，當未被選中時，會把false-value的值傳給v-model
注：這裡的true-value和false-value特性並不會影響輸入控制元件的value特性，因為瀏覽器在提交表單時並不會包含未被選中的複選框，如果要確保表單中這兩個值中的一個能夠被提交，比如(yes,no)，請換用單選按鈕
例如：單選按鈕
程式碼如下：
<template>
<div class="main">
<input type="radio" v-model="pick" v-bind:value="aa">
<p>選擇值是：{{pick}}</p>
</div>
</template>
<script>
export default {
data() {
return {
pick: "",
aa: "選中了"
};
}
};
</script>
當選中了單選按鈕後，v-model的pick值會獲取當前按鈕的value的值。
例如：選擇框的選項
<template>
<div class="main">
<select v-model="sel">
<option disabled value>--請選擇--</option>
<option v-bind:value="{number:123}">123</option>
</select>
<p>選擇值是：{{sel.number}}</p>
</div>
</template>
<script>
export default {
data() {
return {
sel: ""
};
}
};
</script>
修飾符
.lazy
在預設情況下，v-model在每次input事件觸發後輸入框的值與資料進行同步（除了上述輸入法組合文字時）。你可以新增lazy修飾符，從而轉變為使用change事件進行同步：
程式碼如下：
<template>
<div class="main">
<input v-model.lazy="msg">
<p>選擇值是：{{msg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
}
};
</script>
註釋：v-model預設是同步資料，使用.lazy會轉變為在change事件中同步，也就是說加上.lazy後，只有當失去焦點或者按下回車鍵時才更新。
.number
.number修飾符可以將輸入的值轉化為Number型別，否則雖然你輸入的是數字，但它的型別其實是String，在數字輸入框中比較有用。
<template>
<div class="main">
<input v-model.number="n" type="number">
<p>我的資料型別是：{{typeof(n)}}</p>
</div>
</template>
<script>
export default {
data() {
return {
n: ""
};
}
};
</script>
.trim
.trim修飾符會自動過濾掉輸入的首尾空格
<template>
<div class="main">
<input type="