表单输入绑定
可以用v-model 指令在表单<input>及<textarea>元素上创建双向数据绑定,v-model本质上不过是语法糖.它负责监听用户的输入时间以及更新数据.
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
<input v-model="message" placeholder="edit">
<p>Message is :{{message}}</p>
#复选框
<div id="example-1">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
< input type="checkbox" id="jone" value="Jone" v-model="checkedNames">
<label for="jone">Jone</label>
<br>
<span>Checked Names:{{ checkedNames }}</span>
</div>
#单选按钮
<div id="example-2">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked:{{picked}}</span>
</div>
var vm = new Vue({
el:"#example-2",
data:{
picked:""
}
})
#选择框
<div id="example-3">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</selected>
</div>
var vm = new Vue({
el:"example-3",
data:{
selected:""
}
})
用v-for渲染动态选项
<div id="example-4">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
<span>Selected:{{selected}}</span>
</div>
var vm = new Vue({
el:"#example-4",
data:{
selected:"A",
options:[
{text:"One", Value:"A"},
{text:"Two", Value:"B"},
{text:"Three", Value:"C"}
]
}
})
值绑定
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)
<!--当选中时，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>
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
#复选框
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
当选中时vm.toggle ==="yes"
当没有选中时vm.toggle === "no"
这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。
#单选按钮
<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 事件进行同步
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
网友评论