您的位置 首页 技术专栏

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

24小时课堂在线收录vue中v-bind和v-model的区别是什么,区别:1、“v-bind”是单向绑定,而“v-model”是双向绑定;2、“v-bind”只能将vue中的数据同步到页面,而“v-model…感谢您关注vue中v-bind和v-model的区别是什么。

区别: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

<input type=”text” v-model=”val” /><p> {{val}} </p>

2. 绑定radio

<input type=”radio” value=”one” v-model=”radioVal” /><input type=”radio” value=”two” v-model=”radioVal” /><label for v-bind=”radioval” />

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

3. 绑定checkBox

(1)单个勾选框,最终的值为逻辑值true和false

<input type=”checkbox” v-model=”checkVal”/><label for=”checkbox”>{{checkVal}}</label>

(2)多个勾选框时,将值绑定到一个数组

<input type=”checkbox” value=”apple” v-model=”checkArray”/><label for=”checkbox”>{{apple}}</label><input type=”checkbox” value=”banana” v-model=”checkArray”/><label for=”checkbox”>{{banana}}</label><input type=”checkbox” value=”pear” v-model=”checkArray”/><label for=”checkbox”>{{pear}}</label><span>{{checkArray | json}}</span>

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

<p v-bind=”message”></p><p>{{message}}</p>

2.绑定属性

<p v-bind:src=”http://….”></p><p v-bind:class=”http://….”></p><p v-bind:style=”http://….”></p>

3.绑定表达式

{{ number + 1 }}{{ ok ? ‘YES’ : ‘NO’ }}{{ message.sppt(”).reverse().join(”) }}

4.绑定html

<div>{{{ raw_html }}}</div>

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

更多编程相关知识,请访问:编程视频!!

以上就是vue中v-bind和v-model的区别是什么的详细内容,更多请关注24小时课堂在线其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/100867.html

为您推荐

返回顶部