总之,区别如下:
1.v-bind用来绑定数据和属性以及表达式,缩写为':'
2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用
一、v-model
v-model多在表单中使用,在表单元素上创建双向绑定,根据控件类型选择正确的方法更新元素,可以绑定text、radio、checkbox、selected
1. 绑定text
{{val}}
2. 绑定radio
radioval的值随着选择单选框的值,会变成one 或者 two
3. 绑定checkBox
(1)单个勾选框,最终的值为逻辑值true和false
{{checkVal}}
(2)多个勾选框时,将值绑定到一个数组
{{apple}}{{banana}}{{pear}}{{checkArray | json}}
checkArray中的值会根据是否选中进行关联变化
4. 绑定select
(1)绑定到单个select
(2)绑定多个select时,同样适用数组
5. 增加参数
(1)lazy
将输入框的input事件改为change事件,使得输入框在change事件中更新而不是input
关于change事件和input事件的区别,简单说来是:
change事件必须是在输入框失去焦点之后才会触发,而input事件可以实时监测。
(2)number
将文本框输入的值都变为数字,如果是变为数字之后是NAN,则返回原始值
(3)debounce
给输入框加一个很小的延迟,设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。
注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据。因此在使用 debounce 时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件,应当使用 debounce 过滤器。
二、v-bind
1.绑定文本
直接用v-bind或者{{}}
{{message}}
2.绑定属性
3.绑定表达式
{{ number +1}}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}
4.绑定html
这个时候必须要使用三个{}