代码干货 | HTML表单控件绑定

本文来源于阿里云-云栖社区，原文点击这里。

基本用法

可以用v-model指令在表单控件元素上创建双向数据绑定；它会根据控件类型自动选取正确的方法来更新元素；但v-model本质上是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子v-model会忽略所有表单元素的value、checked、selected 特性的初始值。

因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data选项中声明初始值对于要求IME(如中文、日语、韩语等)(IME意为’输入法’)的语言，你会发现v-model不会在ime输入中得到更新。

如果你也想实现更新，请使用 input事件。

文本

<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span><p style="white-space: pre-line">{{ message }}</p><br><textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

单个勾选框，逻辑值：

<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>

多个勾选框，绑定到同一个数组：

<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><script>new Vue({    el: '...',    data: {        checkedNames: []    }})</script>

单选按钮

<div id="example-4">    <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></div><script>new Vue({    el: '#example-4',    data: {        picked: ''    }})</script>

选择列表

单选列表:

<div id="example-5">    <select v-model="selected">        <option disabled value="">请选择</option>        <option>A</option>        <option>B</option>        <option>C</option>    </select>    <span>Selected: {{ selected }}</span></div><script>new Vue({    el: '...',    data: {        selected: ''    }})</script>

如果v-model表达初始的值不匹配任何的选项，元素就会以”未选中”的状态渲染。在iOS中，这会使用户无法选择第一个选项，因为这样的情况下，iOS不会引发change事件。因此，像以上提供disabled选项是建议的做法。

>>>展开全文