v-model的使用
你可以用
v-model
指令在表单、
及 `` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model的基本使用
-
表单控件在实际开发中时非常常见的。特别是对于用户信息的提交,需要大量的表单。
-
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
-
案例解析:
- 当我们在输入框输入内容时
- 因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变。
- 当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以DOM会发怔响应的改变。
- 所以,通过v-model实现了双向绑定。
-
当然,我们也可以将v-model用于textarea元素。
-
双向绑定案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-v-model的基本使用</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '我是阿牛',
}
})
</script>
</body>
</html>
v-model的原理
- v-model其实是一个语法糖,它的背后本质上是包含两个操作:
- v-bind绑定一个value属性。
- v-on指令给当前元素绑定input事件。
- 也就是说下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-v-model的原理</title>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="valueChange">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '我是阿牛',
},
methods: {
valueChange(event) {
this.message = event.target.value;
}
}
})
</script>
</body>
</html>
这样的效果和之前使用v-model是一样的,或者用简短的方式表达:
v-model: radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-v-model结合radio类型</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是:{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
sex: '男'
}
})
</script>
</body>
</html>
上述代码我们在data中将set设置为男作为了了默认值。
v-model: checkbox
- 复选框分为两种情况:单个勾选框和多个勾选框。
- 单个勾选框:
- v-model即为布尔值。
- 此时input的value并不影响v-model的值。
- 多个复选框:
- 当是多个复选框,因为可以选中多个,所以对应的data中的属性是一个数组。
- 当选中某一个时,就会将input的value添加到数组中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-v-model结合checkbox</title>
</head>
<body>
<div id="app">
<!-- checkbox单选框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意
</label>
<h2>您的选择是:{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<br>
<!-- checkbox多选框 -->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="说唱" v-model="hobbies">说唱
<input type="checkbox" value="街舞" v-model="hobbies">街舞
<input type="checkbox" value="电子竞技" v-model="hobbies">电子竞技
<h2>您的爱好是{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: false,
hobbies: []
}
})
</script>
</body>
</html>
v-model: select
- 和checkbox一样,select也分单选和多选两种情况
- 单选:只能选中一个值。
- v-model绑定的是一个值。
- 当我们选中option中的一个时,会将它对应的value赋值到mySelect中。
- 多选:可以选中多个值。
- v-model绑定的是一个数组。
- 当选中多个值时,就会将选中的option对应的value添加到数组mySelect中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-v-model结合select类型</title>
</head>
<body>
<div id="app">
<!-- 选择一个 -->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="草莓">草莓</option>
<option value="樱桃">樱桃</option>
</select>
<h2>您的选择是{{fruit}}</h2>
<br>
<!-- 选择多个 -->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="草莓">草莓</option>
<option value="樱桃">樱桃</option>
</select>
<h2>您的选择是{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruit: '草莓',
fruits: []
}
})
</script>
</body>
</html>
值绑定
对于单选按钮,复选框及选择框的选项,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 实例的一个动态 property 上,这时可以用 v-bind
实现,并且这个 property 的值可以不是字符串。
复选框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'
这里的 true-value
和 false-value
attribute 并不会影响输入控件的 value
attribute,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(即“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
通俗介绍
- 以上介绍是Vue官方的,十分疑惑,但是仔细阅读之后发现很简单,就是动态的给value赋值而已:
- 我们在前面的value中的值,可以回头看一下,都是定义在input的时候给定的。
- 但是在真实开发中,这些input的值可能是从网络获取或定义在data中的。
- 所以我们可以通过
v-bind: value
给value绑定值。 - 将我们上面checkbox的案例稍作修改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-v-model值绑定</title>
</head>
<body>
<div id="app">
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
</label>
<h2>您的爱好是:{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: false,
hobbies: [],
originHobbies: ['篮球', '说唱', '街舞', '台球', 'freestyle']
}
})
</script>
</body>
</html>
修饰符
- lazy修饰符:
- 默认情况下,v-model默认是在input事件中同步输入框到的数据的。
- 也就是说,一旦有数据发生改变,对应的data中的数据就会自动发生改变。
- lazy修饰符可以让数据在失去焦点或者回车时才会更新。
- number修饰符:
- 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
- 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
- number修饰符可以让在输入框中输入的内容自动转成数字类型。
- trim修饰符:
- 如果输入的内容首尾有很多空格,通常我们希望将其去除。
- trim修饰符可以过滤内容左右两边的空格。
回顾
Vue笔记一——Vue安装与体验
Vue笔记二——Vue声明周期与模板语法
Vue笔记三——计算属性(computed)
Vue笔记四——事件监听的使用
Vue笔记五——条件判断与循环遍历
Vue笔记六——书籍购物车案例