1. 基礎用法

　　v-model 指令：在表單 input 和 textarea 元素上創建雙向數據綁定。

1.1 單行文本（Text）

<div id="app"><input type="text" v-model="name"><p>name：{{ name }}</p> </div> <script>var vm = new Vue({el: '#app',data: {name: "LiBing"}}); </script>

1.2 多行文本（Multiple Text）

<div id="app"><textarea v-model="remark"></textarea><p>remark{{ remark }}</p> </div> <script>var vm = new Vue({el: '#app',data: {remark: "備注"}}); </script>

注：在 textarea 中插值（<textarea>{{text}}</textarea>）并不會生效。使用?v-model?來替代。

1.3 復選框（checkbox）

　　單選 checkbox，綁定到布爾值。

<div id="app"><input type="checkbox" id="chkIsDefault" v-model="isDefault"/><label for="chkIsDefault">{{ isDefault ? "是" : "否" }}</label> </div> <script>var vm = new Vue({el: '#app',data: {isDefault: true}}); </script>

　　多選 checkbox，綁定到同一個數組。

<div id="app"><template v-for="fruit in fruits"><input type="checkbox" :id="fruit.id" :value="fruit.text" v-model="checkedFruits" /><label :for="fruit.id">{{ fruit.text }}</label></template><div>選擇的水果：{{ checkedFruits }}</div> </div> <script>var vm = new Vue({el: '#app',data: {fruits: [{id: "apple",text: "蘋果"},{id: "banana",text: "香蕉"},{id: "grape",text: "葡萄"}],checkedFruits: ["蘋果"]}}); </script>

1.4 單選框（radio）

<div id="app"><template v-for="fruit in fruits"><input type="radio" :id="fruit.id" :value="fruit.text" v-model="checkedFruit" /><label :for="fruit.id">{{ fruit.text }}</label></template><div>選擇的水果：{{ checkedFruit }}</div> </div> <script>var vm = new Vue({el: '#app',data: {fruits: [{id: "apple",text: "蘋果"},{id: "banana",text: "香蕉"},{id: "grape",text: "葡萄"}],checkedFruit: "蘋果"}}); </script>

1.5 下拉框（select）

1.5.1 單選select

<div id="app"><select v-model="selected"><option disabled>請選擇</option><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option></select><div>選擇項：{{ selected }}</div> </div> <script>var vm = new Vue({el: '#app',data: {selected: "1",options: [{text: "A",value: "1"},{text: "B",value: "2"},{text: "C",value: "3"}]}}); </script>

1.5.2 多選select

<div id="app"><select v-model="selected" multiple><option disabled>請選擇</option><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option></select><div>選擇項：{{ selected }}</div> </div> <script>var vm = new Vue({el: '#app',data: {selected: "1",options: [{text: "A",value: "1"},{text: "B",value: "2"},{text: "C",value: "3"}]}}); </script>

2. 與value屬性綁定

　　對于 radio, checkbox 和 select 的 option 選項，通?？梢詫?v-model 與值是靜態字符串的 value 屬性關聯。

2.1 checkbox

<div id="app"><input type="checkbox" id="chkIsDefault" v-model="isDefault" true-value="true" false-value="false" /><label for="chkIsDefault">{{ isDefault == "true" ? "是" : "否" }}</label> </div> <script>var vm = new Vue({el: '#app',data: {isDefault: "true"}}); </script>

3. 修飾符（modifiers）

3.1 .lazy

　　默認情況下，v-model 會在每次 input 事件觸發之后，將數據同步至 input 元素中（除了上述提到的輸入法組合文字時不會）。

　　可以添加 lazy 修飾符，從而轉為在觸發 change 事件后同步。

<div id="app"><input type="text" v-model.lazy="title" /><label>{{ title }}</label> </div> <script>var vm = new Vue({el: '#app',data: {title: "LiBing"}}); </script>

3.2 .number

<div id="app"><input type="number" v-model.number="age" /> </div> <script>var vm = new Vue({el: '#app',data: {age: 10}}); </script>

3.3 .trim

　　v-model.trim：自動過濾掉首尾空格

<div id="app"><input type="text" v-model.trim="title" /> </div> <script>var vm = new Vue({el: "#app",data: {title: "LiBing"}}); </script> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue.js 2.x笔记：表单绑定（3）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。