【Vue】表单 input 绑定

网址：https://vue.docschina.org/v2/guide/forms.html

表单 input 绑定

基础用法

可以通过使用 v-model 指令，在表单 input, textarea 和 select 元素上创建双向数据绑定。v-model 指令可以根据 input 的 type 类型，自动地以正确的方式更新元素。虽然略显神奇，然而本质上 v-model 不过是「通过监听用户的 input 事件来更新数据」的语法糖，以及对一些边界情况做特殊处理。

v-model 会忽略所有表单元素中 value, checked 或 selected 属性上初始设置的值，而总是将 Vue 实例中的 data 作为真实数据来源。因此你应该在 JavaScript 端的组件 data 选项中声明这些初始值，而不是 HTML 端。

对于需要使用输入法的语言（中文、日文、韩文等），你会发现，在输入法字母组合窗口输入时，v-model 并不会触发数据更新。如果你想在此输入过程中，满足更新数据的需求，请使用 input 事件。

---

单行文本(text)

<input v-model="message" placeholder="编辑">
<p>message 是：{{ message }}</p>

多行文本(multiple text)

<span>多行 message 是：</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="添加多行"></textarea>

在 textarea 中插值（<textarea>{{text}}</textarea>）并不会生效。使用 v-model 来替代。

checkbox

单选 checkbox，绑定到布尔值：

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

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

<div id='example-3'>
  <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>勾选的名字是：{{ checkedNames }}</span>
</div>


new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

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 }}</span>