• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2022-01-05 17:36:05原创125

    区别: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.split('').reverse().join('') }}

    4.绑定html

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

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

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

    以上就是vue中v-bind和v-model的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue v-bind v-model
    上一篇:如何理解css的预处理器、后处理器以及选择器 下一篇:什么是css3伪元素

    相关文章推荐

    • 认识一下vue中的$attrs和$listeners属性,聊聊用法• 深入解析下vue3中的渲染系统• 尤雨溪解释vue3源码为啥不用?.可选链式操作符!• vue3项目keepAlive使用方法详解• 带你详解vue中实现全页面或局部刷新的方法• 一文你带快速认识Vue-Router路由

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网