5.12v-model
v-model
表单控件在实际开发中是非常常见的. 特别是对于用户信息的提交, 需要大量的表单.
Vue中使用v-model指令来实现表单元素和数据的双向绑定.
案例的解析:
当我们在输入框输入内容时
因为input中的v-model绑定了message, 所以会实时将输入的内容传递给message, message发生改变.
当message发生改变时, 因为上面我们使用Mustache语法, 将message的值插入到DOM中, 所以DOM会发生相应的改变.
所以, 通过v-model实现了双向的绑定.
当然, 我们也可以将v-model用于textarea元素
v-model原理
v-model其实是一个语法糖, 它的背后本质上是包含两个操作:
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
也就是说下面的代码: 等同于下面的代码:
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
v-model: radio
当存在多个单选框时
首先, label里的for跟input里的id必须一样; 其次, 2个radio的名字必须一样才能互斥. 如下图: v-model如果在2个radio里绑定的是同一个属性, 那么也能达到互斥的效果.
下图中 value可以使用v-bind绑定: :value="abc"
v-model: checkbox
复选框分为两种情况: 单个勾选框和多个勾选框
单个勾选框:
v-model即为布尔值.
此时input的value并不影响v-model的值.
多个复选框:
当是多个复选框时, 因为可以选中多个, 所以对应的data中属性是一个数组.
当选中某一个时, 就会将input的value添加到数组中.
lable好处就是用户可以点击文字也会选中
v-model: select
和checkbox一样, select也分单选和多选两种情况.
单选: 只能选中一个值.
v-model绑定的是一个值.
当我们选中option中的一个时, 会将它对应的value赋值到mySelect中
多选: 可以选中多个值.
v-model绑定的是一个数组.
当选中多个值时, 就会将选中的option对应的value添加到数组mySelects中
v-model绑定的对象如果不是数组,就一定会被默认成一个boolean值
值绑定:
:value, :for, :id都可以做值绑定
v-model双向绑定数组数据时遇到的天坑
<body>
<div id ="app">
<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>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
url:'<a href="http://www.baidu.com">百度一下</a>',
hobbies: [],
originHobbies:['篮球', '足球', '台球', '高尔夫球', '羽毛球'],
},
methods: {}
});
</script>
</body>
用Chrome浏览器
用360浏览器
查看了几个文档后发现是Chrome不兼容Object.observe
解决方法
使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上. 还可以使用 vm.$set 实例方法, 这也是全局 Vue.set 方法的别名.
vue中遇到的坑 — 变化检测问题(数组相关)
深入响应式原理
也就是说, 因为360浏览器太老(没有更新)的原因, 没有废弃object.server, 所以才能够这样用. 现阶段只能使用vue.set
修饰符
lazy修饰符:
默认情况下, v-model默认是在input事件中同步输入框的数据的.
也就是说, 一旦有数据发生改变对应的data中的数据就会自动发生改变.
lazy修饰符可以让数据在失去焦点或者回车时才会更新:
number修饰符:
默认情况下, 在输入框中无论我们输入的是字母还是数字, 都会被当做字符串类型进行处理.
但是如果我们希望处理的是数字类型, 那么最好直接将内容当做数字处理.
number修饰符可以让在输入框中输入的内容自动转成数字类型:
trim修饰符:
如果输入的内容首尾有很多空格, 通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格
浙公网安备 33010602011771号