v-model
v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值
绑定的属性和事件
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
1.text和textarea元素使用value属性和input事件。
2.checkbox和radio使用checked属性和change事件。
3.select字段将value作为prop并将change作为事件。
表单元素绑定
input绑定
输入的内容是：{{ message }}
textarea绑定
输入的内容是：
{{ message }}
checkbox绑定
多个复选框，绑定到同一个数组
{{hobby}}
radio绑定
Picked: {{ picked }}
new Vue({
el: '#app',
data: {
picked: ''
}
})select绑定
单选时：
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: ''
}
})多选时，只需加上multiple属性即可
Selected: {{ selected }}
值绑定
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)
但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。
{{testHobby}}
代码详解
1.我们在data中创建了hobbies数组，这里是为了模拟后端返回的数据，数据是动态的
2.又定义了数组testHobby，这是将复选框中的数据与它进行绑定，只要勾选了复选框中的数据，就会将其添加到testHobby中
3.使用了for循环，将hobbies数据中的数据遍历出来
4.input标签中绑定了id属性，value属性，值为遍历出来的数据，之后打开网页源码中可以看到
5.v-model将input标签与testHobby绑定
最后我们查看下绑定的效果，与绑定后的网页源码
我们可以看到绑定后id和value的值都是遍历后的hobby
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而只有按下回车键或者失去焦点时，值才会发生变化：
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
..
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/148717.html