持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
v-model双向绑定指令
v-model 它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。 v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。然后当输入事件发生时，实时更新vue实例中的数据。
表单中的双向绑定
输入框（input）
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model</title>
<!-- 使用CDN引入Vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
content: "双向绑定指令"
}
},
template:`
<div>
<div>{{content}}</div>
<input v-model="content"/>
</div>
`
})
const vm = app.mount('#root');
</script>
</body>
</html>
页面效果：
在输入框中输入v-model，content中内容改变,在控制台改变content，input框内容也发生改变。说明content和input框的内容是双向绑定的。
多行文本输入框（textarea）
示例代码：
const app = Vue.createApp({
data(){
return {
content: "双向绑定指令"
}
},
template:`
<div>
<div>{{content}}</div>
<textarea v-model="content"/>
</div>
`
})
页面效果：
textarea 和 input 同理
单选框（input-radio）
代码演示：
const app = Vue.createApp({
data(){
return {
content: ""
}
},
template:`
<div>
{{content}}
张三<input type="radio" v-model="content" value="张三"/>
李四<input type="radio" v-model="content" value="李四"/>
</div>
`
})
页面效果：
多选框（input-checkbox）
多选框双向绑定
代码演示：
const app = Vue.createApp({
data(){
return {
content: true
}
},
template:`
<div>
{{content}}
张三<input type="checkbox" v-model="content"/>
李四<input type="checkbox" v-model="content"/>
</div>
`
})
页面效果：
多选框数据填充
示例代码：
const app = Vue.createApp({
data(){
return {
content: []
}
},
template:`
<div>
{{content}}
张三<input type="checkbox" v-model="content" value="张三"/>
李四<input type="checkbox" v-model="content" value="李四"/>
</div>
`
})
页面效果：
多选框自定义属性
代码演示：
const app = Vue.createApp({
data(){
return {
content: "Y"
}
},
template:`
<div>
{{content}}
<input type="checkbox" v-model="content" true-value="Y" false-value="N"/>
</div>
`
})
页面效果：
选择列表（select）
单选列表
代码演示：
const app = Vue.createApp({
data(){
return {
content: ""
}
},
template:`
<div>
{{content}}
<select v-model="content">
<option disabled value="">请选择内容</option>
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
</select>
</div
`
})
页面效果：
多选列表
代码演示：
const app = Vue.createApp({
data(){
return {
content: []
}
},
template:`
<div>
{{content}}
<select v-model="content" multiple>
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
</select>
</div
`
})
页面效果：
表单修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。 使用. lazy 修饰符可以使input失去焦点时进行数据进行同步。
代码演示：
const app = Vue.createApp({
data(){
return {
content: "Y"
}
},
template:`
<div>
{{content}}
<input v-model.lazy="content" />
</div>
`
})
页面效果：
失去焦点后
.number
使用 .number修饰符会自动将用户的输入值转为数值类型。
示例代码：
const app = Vue.createApp({
data(){
return {
content: "666"
}
},
template:`
<div>
{{typeof content}}
<input v-model.number="content" />
</div>
`
})
页面效果：
初始状态
输入88后
.trim
使用 .trim修饰符会自动过滤用户输入数据前后的空格
代码演示：
const app = Vue.createApp({
data(){
return {
content: "hello Vue.js!"
}
},
template:`
<div>
{{content}}
<input v-model.trim="content" />
</div>
`
})
页面效果：
本文到此结束
如果大家还有什么其他想法，欢迎在评论区交流！
