深入剖析v-model指令
一、v-model指令
可以在表单元素上创建双向数据绑定。即数据更新元素更新、元素更新数据也会更新。
本质上v-model为语法糖
| 元素类型 | 属性 | 事件 |
|---|---|---|
| input[type=text]、textarea | value | input |
| input[checkbox]、input[radio] | checked | change |
| select | value | change |
1.input
1.type=text 文本框
<div id="app">
<input type="text" v-model='message'>
<p>Message为：{
{
message }}</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
2.type=checkbox 复选框
1.单个复选框
绑定到布尔值，v-model=“Boolean”
<div id="app">
<input type="checkbox" id="checkbox1" :checked=false>
<label for="checkbox1">大哥</label>
<input type="checkbox" id="checkbox2" v-model='checkbox'>
<label for="checkbox2">二哥</label>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
checkbox: true
}
})
</script>
2.多个复选框
<div id="app">
<input type="checkbox" id="large" value="大哥" v-model="checkedNames">
<label for="large">大哥</label>
<input type="checkbox" id="second" value="二哥" v-model="checkedNames">
<label for="second">二哥</label>
<input type="checkbox" id="small" value="小弟" v-model="checkedNames">
<label for="small">小弟</label>
<br>
<span>被选中的人有: {
{
checkedNames }}</span>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
3.type=radio 单选框
<div id="app">
<input type="radio" id="large" value="大哥" v-model="picked">
<label for="large">大哥</label>
<input type="radio" id="second" value="二哥" v-model="picked">
<label for="second">二哥</label>
<input type="radio" id="small" value="小弟" v-model="picked">
<label for="small">小弟</label>
<br>
<span>被选中的人: {
{
picked }}</span>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
picked: []
}
})
</script>
2.textarea
<div id="app">
<p >多行文本为：{
{
message }}</p>
<textarea v-model="message" placeholder="添加文本"></textarea>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
3.select
匹配的值为option中的汉字
1.单选
<div id="app">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择: {
{
selected === '请选择' ? '' : selected }}</span>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
selected: '请选择'
}
})
</script>
注意: 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，可以提供一个值为空的禁用选项：
<div id="app">
<select v-model="selected">
<option :disabled='selected'>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择: {
{
selected === '请选择' ? '' : selected }}</span>
</div>
2.多选
<div id="app">
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择: {
{
selected }}</span>
</div>
4.修饰符
1.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。如果要变为使用change事件同步可以添加lazy修饰符：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
2.number
自动将用户的输入值转为数值类型：
<input v-model.number="age" type="number">
3.trim
自动过滤用户输入的首尾空白字符：
<input v-model.trim="msg">
