v-model 指令在表单元素上创建双向数据绑定，它负责用于监听用户输入事件以更新数据
注意，v-model 会忽略所有表单元素特性的初始值，而总是将 Vue 实例的数据作为数据来源
1、输入框
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="请输入内容">
<span>输入的值为: {{ message }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '' // string 类型
}
})
</script>
</body>
</html>
2、单选按钮
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="radio" id="apple" value="Apple" v-model="picked">
<label for="apple">Apple</label>
<br>
<input type="radio" id="orange" value="Orange" v-model="picked">
<label for="orange">Orange</label>
<br>
<span>选中的值为: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: '' // string 类型
}
})
</script>
</body>
</html>
3、复选框
- 单个复选框
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="bool" v-model="checked">
<label for="bool">{{ checked }}</label>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false // boolean 类型
}
})
</script>
</body>
</html>
- 多个复选框
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="apple" value="Apple" v-model="checked">
<label for="apple">Apple</label>
<input type="checkbox" id="orange" value="Orange" v-model="checked">
<label for="orange">Orange</label>
<br>
<span>选择的值为: {{ checked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: [] // array 类型
}
})
</script>
</body>
</html>
4、选择框
- 单选
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>Apple</option>
<option>Orange</option>
</select>
<span>选择的值为: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: '' // string 类型
}
})
</script>
</body>
</html>
- 多选
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<select multiple v-model="selected">
<option>Apple</option>
<option>Banana</option>
<option>Cherry</option>
<option>Durian</option>
<option>Orange</option>
</select>
<span>选择的值为: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: [] // array 类型
}
})
</script>
</body>
</html>
5、修饰符
-
.lazy：默认情况下，input 事件触发后同步数据，使用.lazy可指定 change 事件触发后同步数据<input v-model.lazy="msg" > -
.number：将用户输入的值自动转换为数值类型<input v-model.number="age" type="number"> -
.trim：将用户输入的值过滤掉首位空白字符<input v-model.trim="msg">
![[计算机网络笔记09] 交换机的生成树协议STP—工作原理](https://img-blog.csdnimg.cn/20200515004351850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvbmdfZmF5ZQ==,size_16,color_FFFFFF,t_70)
![[计算机网络笔记10] 虚拟局域网VLAN](https://img-blog.csdnimg.cn/20200515141450123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvbmdfZmF5ZQ==,size_16,color_FFFFFF,t_70)
![[计算机网络笔记11] IPv4地址—分类地址](https://img-blog.csdnimg.cn/20200515155253364.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvbmdfZmF5ZQ==,size_16,color_FFFFFF,t_70)
![[计算机网络笔记12] IPv4地址—划分子网](https://img-blog.csdnimg.cn/20200515164443360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvbmdfZmF5ZQ==,size_16,color_FFFFFF,t_70)
![[计算机网络笔记14] IPv4地址—定长子网掩码和变长子网掩码](https://img-blog.csdnimg.cn/20200515172815639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvbmdfZmF5ZQ==,size_16,color_FFFFFF,t_70)