表單輸入綁定

用 v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。

文本

<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>

復選框

單個復選框 綁定到布爾值

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

多個復選框 綁定到同一個數組

<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="">請選擇</option><option>JavaScript</option><option>JQuery</option><option>VueJS</option></select><p>Selected: {{selected}}</p>
</div>
<script>
new Vue({el: '#app',data: {selected: ''}
})
</script>

選擇多選時 綁定到數組

<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渲染的動態選項

<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>

值綁定

對于單選按鈕，復選框及選擇框的選項，v-model 綁定的值通常是靜態字符串 (對于復選框也可以是布爾值)

<!-- 當選中時，`picked` 為字符串 "a" -->
<input type="radio" v-model="picked" value="a"><!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle"><!-- 當選中第一個選項時，`selected` 為字符串 "abc" -->
<select v-model="selected"><option value="abc">ABC</option>
</select>

復選框

這里的 true-value 和 false-value 特性并不會影響輸入控件的 value 特性，因為瀏覽器在提交表單時并不會包含未被選中的復選框。如果要確保表單中這兩個值中的一個能夠被提交，(比如“yes”或“no”)，請換用單選按鈕。

<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>

選擇框的選項

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

轉載于:https://www.cnblogs.com/xiaobaiv/p/9148716.html

總結

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

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