两者都可以用来绑定数据,所以我产生了疑问,那就是这两个有啥区别?
API — Vue.jscn.vuejs.org![548d91ac76190ab1f746a32ab37e213d.png](https://i-blog.csdnimg.cn/blog_migrate/0934a0fe95905be7666ed64a127c56d2.jpeg)
![548d91ac76190ab1f746a32ab37e213d.png](https://i-blog.csdnimg.cn/blog_migrate/0934a0fe95905be7666ed64a127c56d2.jpeg)
先看v-model
v-model
- 预期:随表单控件类型不同而不同。【意思就是不同的表单控件,绑的值的类型不同】
【只能用在html表单控件上(还有自定义组件),其他组件无效】
- 限制:
<input>
<select>
<textarea>
- components
- 用法:
在表单控件或者组件上创建双向绑定。 【v-bind是单向绑定,配合事件也可以实现双向绑定】
![b9b736bb20e19e852414ae45256b500d.png](https://i-blog.csdnimg.cn/blog_migrate/7a607b020d040057e308195bd0a6205f.jpeg)
v-bind
- 缩写:
:
- 预期:
any (with argument) | Object (without argument)
- 参数:
attrOrProp (optional)
- 用法:
动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。【绑的是html元素的属性或者组件的prop,而不是像model那样绑的是表单控件的值】
在绑定class
或style
attribute 时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时,可以绑定到一个包含键值对的对象。注意此时class
和style
绑定不支持数组和对象。