vuejs表单控件绑定

一、基础语法

vuejs中用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但要注意的是v-model仅仅是语法糖，它只负责监听用户的输入时间一更新数据，并特别处理一些极端的例子。

注：1.·v-model`并不关心表单控件初始化所生成的值。因为它会选择Vue实例数据来作为具体的值

2.当控件有多种语言的需求时，v-model不会因为语言的改变而更新，在这种情况下要使用`input’事件来替代

1.文本

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

2.多行文本

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

注：在文本区域插值(<textarea></textarea>)并不会生效，应用v-model来替代

3.复选框

a.单个勾选框，逻辑值：

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

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

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

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>

5.选择列表

a.单选列表:

<select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

b.多选列表（绑定到同一个数组）：

<select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

c.用v-for渲染：

//HTML
<select v-model="selected">
    <option v-for="option in options" v-bind:value="option.text">{{ option.text }}</option>
</select>
<span>Selected: {{ selected }}</span>

//JS
new Vue({
    el:'#id',
    data:{
        selected:'A',
        options:[
            {text:'One',value:'A'},
            {text:'Two',value:'B'},
            {text:'Three',value:'C'}
        ]
    }
});

二、绑定value

对于单选按钮，勾选框及选择列表选项，v-model绑定的value通常是静态字符串（对于勾选框是逻辑值）：

//当选中时，`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>
通过`v-bind`可以自己定义控件选中时显示的value值

1.复选框

<input type="checkbox"
       v-model="toggle"
       v-bind:true-value="a"
       v-bind:false-value="b">

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

2.单选按钮

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

3.选择列表设置

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
   <option v-bind:value="{ number: 456 }">456</option>
    <option v-bind:value="{ number: 789 }">789</option>
</select>

typeof vm.selected // -> 'object'
vm.selected.number // -> 123 || 456 || 789

修饰符

1..lazy

在默认情况下，v-model在input事件中同步输入框的值与数据（除了上述语言问题部分），这是我们可以添加一个修饰符.lazy，从而转变为在change事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

2..number

如果想自动将用户的输入值转为Number类型（如果原值的转换结果为NaN则返回原值），可以添加一个修饰符number给v-model来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在type="number"时HTML中输入的值也总是会返回字符串类型。

3.trim

如果要自动过滤用户输入的首尾空格，可以添加trim修饰符到v-model上过滤输入：

<input v-model.trim="msg">

总结：表单的总结绑定通常很有效，通过三种修饰符我们可以有效的对用户的输入进行处理，并根据自身需求决定什么时候响应事件；操作非常简单，绑定的单个控件时，我们我们往往只需要在data中使用一个变量设定初始值即可，对于多选，只需要将变量设为数组即可，选中控件的value值可以通过v-bind进行绑定。