Vue.js 学习8 表单控件绑定

一、基础用法

使用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

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

复选框

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

new Vue({  el: '...',  data: {    checkedNames: []  }})

单选按钮

<div id="example-4" class="demo">  <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>

new Vue({  el: '#example-4',  data: {    picked: ''  }})

3.单选列表

<div id="example-5" class="demo">  <select v-model="selected">    <option>A</option>    <option>B</option>    <option>C</option>  </select>  <span>Selected: {{ selected }}</span></div>

new Vue({  el: '#example-5',  data: {    selected: null  }})

4.多选列表

<div id="example-6" class="demo">  <select v-model="selected" multiple style="width: 50px">    <option>A</option>    <option>B</option>    <option>C</option>  </select>  <br>  <span>Selected: {{ selected }}</span></div>

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

二、绑定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>

复选框

<input  type="checkbox"  v-model="toggle"  v-bind:true-value="a"  v-bind:false-value="b">// 当选中时vm.toggle === vm.a// 当没有选中时vm.toggle === vm.b

单选按钮

<input type="radio" v-model="pick" v-bind:value="a">// 当选中时vm.pick === vm.a

选择列表设置

<select v-model="selected">    <!-- 内联对象字面量 -->  <option v-bind:value="{ number: 123 }">123</option></select>// 当选中时typeof vm.selected // -> 'object'vm.selected.number // -> 123

三、修饰符

.lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，但可以加lazy修饰符，从而转变为在change事件中同步。

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

.number
如果想自动将用户的输入值转为Number类型，可以添加number输入值。

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

.trim
自动过滤首尾空格