表單輸入綁定

用 v-model 指令在表單 <input> 及 <textarea> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。

文本

<div id="app"><input v-model="message" type="text" placeholder="edit me"><p>Message is: {{message}}</p>
</div>
<script>
new Vue({el: '#app',data: {message: ' '}
})
</script>

多行文本

<div id="app"><textarea v-model="message" type="text" placeholder="add multiple lines"></textarea><p>Multiline is: </p><p style="white-space: pre-line;">{{message}}</p>
</div>
<script>
new Vue({el: '#app',data: {message: ''}
})
</script>

復(fù)選框

單個(gè)復(fù)選框 綁定到布爾值

<div id="app"><input type="checkbox" v-model="checked"><label for="checkbox">{{checked}}</label>
</div>
<script>
new Vue({el: '#app',data: {checked: false}
})
</script>

多個(gè)復(fù)選框 綁定到同一個(gè)數(shù)組

<div id="app"><input type="checkbox" value="JavaScript" v-model="checkedNames"><label for="JavaScript">JavaScript</label><input type="checkbox" value="jQuery" v-model="checkedNames"><label for="JQuery">JQuery</label><input type="checkbox" value="VueJs" v-model="checkedNames"><label for="VueJs">VueJs</label><br><br><span>checkedNames：{{checkedNames}}</span>
</div>
<script>
new Vue({el: '#app',data: {checkedNames: []}
})
</script>

單選按鈕

<div id="app"><input type="radio" value="JavaScript" v-model="picked"><label for="JavaScript">JavaScript</label><input type="radio" value="jQuery" v-model="picked"><label for="JQuery">JQuery</label><input type="radio" value="VueJs" v-model="picked"><label for="VueJs">VueJs</label><br><br><span>Picked: {{picked}}</span>
</div>
<script>
new Vue({el: '#app',data: {picked: ' '}
})
</script>

< br />

選擇框

選擇框單選

<div id="app"><select v-model="selected"><option disabled value="">請(qǐng)選擇</option><option>JavaScript</option><option>JQuery</option><option>VueJS</option></select><p>Selected: {{selected}}</p>
</div>
<script>
new Vue({el: '#app',data: {selected: ''}
})
</script>

選擇多選時(shí) 綁定到數(shù)組

<div id="app"><select multiple v-model="selected"><option>JavaScript</option><option>JQuery</option><option>VueJS</option></select><p>Selected: {{selected}}</p>
</div>
<script>
new Vue({el: '#app',data: {selected: ''}
})
</script>

用v-for渲染的動(dòng)態(tài)選項(xiàng)

<div id="app"><select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{option.text}}</option></select><p>Selected: {{selected}}</p>
</div>
<script>
new Vue({el: '#app',data: {selected: 'A',options: [{ text: 'JavaScript', value: 'A'},{ text: 'JQuery', value: 'B'},{ text: 'VueJS', value: 'C'}]}
})
</script>

值綁定

對(duì)于單選按鈕，復(fù)選框及選擇框的選項(xiàng)，v-model 綁定的值通常是靜態(tài)字符串 (對(duì)于復(fù)選框也可以是布爾值)

<!-- 當(dāng)選中時(shí)，`picked` 為字符串 "a" -->
<input type="radio" v-model="picked" value="a"><!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle"><!-- 當(dāng)選中第一個(gè)選項(xiàng)時(shí)，`selected` 為字符串 "abc" -->
<select v-model="selected"><option value="abc">ABC</option>
</select>

復(fù)選框

這里的 true-value 和 false-value 特性并不會(huì)影響輸入控件的 value 特性，因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(fù)選框。如果要確保表單中這兩個(gè)值中的一個(gè)能夠被提交，(比如“yes”或“no”)，請(qǐng)換用單選按鈕。

<div id="app"><input type="checkbox" v-model="picked" true-value="yes" false-value="no"><label>Java</label><br><span>Picked: {{picked}}</span>
</div>
<script>
new Vue({el: '#app',data: {picked: ' '}
})
</script>

單選按鈕

<div id="app"><input type="radio" v-model="picked" v-bind:value="a"><label>Java</label><br><span>Picked: {{picked}}</span>
</div>
<script>
new Vue({el: '#app',data: {a: 'hello',picked: ''}
})
</script>

選擇框的選項(xiàng)

<div id="app"><select v-model="selected"><!-- 內(nèi)聯(lián)對(duì)象字面量 --><option v-bind:value="{number: 3121}">123</option></select><br><span>Picked: {{selected.number}}</span>
</div>
<script>
new Vue({el: '#app',data: {selected: ''}
})
</script>

轉(zhuǎn)載于:https://www.cnblogs.com/xiaobaiv/p/9148716.html

總結(jié)

以上是生活随笔為你收集整理的Vue - 表单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。