這次帶給大家Vue.js的表單輸入綁定，Vue.js的表單輸入綁定的注意事項有哪些，下面就是實戰案例，一起來看一下。
利用v-model可以實作表單元素的value與背景資料的雙向綁定，具體用法如下：
<!--文本-->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!--checkbox多个复选框绑定(value)到数组，单个v-model绑定到布尔值即可-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">单个复选框</label>
<br>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<br><br>
<!--单选radio-->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
<br><br>
<!--选择框select,多选时绑定到数组,可用v-for渲染动态选项-->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Single selected: {{ selected }}</span>
<br><br>
<select v-model="multiSelected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Multiple Selected: {{ multiSelected }}</span>可為v-model新增修飾符：
v-model.lazy -- 將輸入事件轉換為使用 change 事件進行同步。
.number -- 自動將值轉換為數值。
.trim -- 去掉輸入的首尾空格。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Vue.js的表單輸入綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！
