如何分析vue中v-bind和v-model的区别
如何分析vue中v-bind和v-model的区别,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联于2013年成立,先为石鼓等服务建站,石鼓等地企业,进行企业商务咨询服务。为石鼓企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
区别:1、“v-bind”是单向绑定,而“v-model”是双向绑定;2、“v-bind”只能将vue中的数据同步到页面,而“v-model”不只能将vue中的数据同步到页面,还可以将用户数据的数据赋值给vue中的属性。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
v-model与v-bind区别:
1、v-bind是单向绑定,用来绑定数据和属性以及表达式,只能将vue中的数据同步到页面。
2、v-model是双向绑定,不只能将vue中的数据同步到页面,而且可以将用户数据的数据赋值给vue中的属性。
3、v-bind可以给任何属性赋值,v-model只能给具备value属性的元素进行数据双向绑定。
一、v-model
v-model多在表单中使用,在表单元素上创建双向绑定,根据控件类型选择正确的方法更新元素,可以绑定text、radio、checkbox、selected
1. 绑定text
{{val}}
2. 绑定radio
radioval的值随着选择单选框的值,会变成one 或者 two
3. 绑定checkBox
(1)单个勾选框,最终的值为逻辑值true和false
(2)多个勾选框时,将值绑定到一个数组
{{checkArray | json}}
checkArray中的值会根据是否选中进行关联变化
4. 绑定select
(1)绑定到单个select
(2)绑定多个select时,同样适用数组
5. 增加参数
(1)lazy
将输入框的input事件改为change事件,使得输入框在change事件中更新而不是input
关于change事件和input事件的区别,简单说来是:
change事件必须是在输入框失去焦点之后才会触发,而input事件可以实时监测。
(2)number
将文本框输入的值都变为数字,如果是变为数字之后是NAN,则返回原始值
(3)trim
取出输入的字符串的首尾空格
二、v-bind
1.绑定文本
直接用v-bind或者{{}}
{{message}}
2.绑定属性
3.绑定表达式
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
4.绑定html
{{{ raw_html }}}
这个时候必须要使用三个{}
关于如何分析vue中v-bind和v-model的区别问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
本文标题:如何分析vue中v-bind和v-model的区别
URL地址:http://scyanting.com/article/podddc.html