代码干货 | 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选项是建议的做法。

>>>展开全文