vue中v-bind和v-model的区别是什么

目录

      v-model与v-bind区别：

一、v-model

1. 绑定text

2. 绑定radio

4. 绑定select

5. 增加参数

二、v-bind

1.绑定文本

2.绑定属性

3.绑定表达式

4.绑定html

---

区别：1、“v-bind”是单向绑定，而“v-model”是双向绑定；2、“v-bind”只能将vue中的数据同步到页面，而“v-model”不只能将vue中的数据同步到页面，还可以将用户数据的数据赋值给vue中的属性。

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

2. 绑定radio

radioval的值随着选择单选框的值，会变成one 或者 two

3. 绑定checkBox

（1）单个勾选框，最终的值为逻辑值true和false

（2）多个勾选框时，将值绑定到一个数组

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或者{{}}

2.绑定属性

 3.绑定表达式

4.绑定html

这个时候必须要使用三个{}

以上就是v-model与v-bind区别的详细内容，希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。谢谢观看！