v-bind与v-model的区别

这篇具有很好参考价值的文章主要介绍了v-bind与v-model的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

v-model与v-bind区别:

1、v-bind是单向绑定,用来绑定数据和属性以及表达式,数据只能从data流向页面。

2、v-model是双向绑定,数据能从data流向页面,也能从页面流向data。

3、v-bind可以给任何属性赋值,v-model只能给表单类,也就是具有value属性的元素进行数据双向绑定,如text、radio、checkbox、selected。

这个原因也很好理解,从页面流向data,v-model是捕获用户的输入值,如果没有value,捕获不了,所以这个流向没有意义,v-model就是收集value值。

例子:

使用v-bind单向绑定

修改data中的值,文本框也会变

v-bind与v-model的区别

修改文本框的值,data不会变

v-bind与v-model的区别

 使用v-model双向绑定

文本框的内容变化,data中的值也会变,反之如此;同时单向文本框的内容也会变化,因为data变化了。 

v-bind与v-model的区别文章来源地址https://www.toymoban.com/news/detail-513479.html

<body>
    <div id="root">
        <!-- 简写 -->
        单向数据绑定<input type="text" name="" id="" :value='name'><br />
        双向数据绑定<input type="text" name="" id="" v-model='name'>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: '单向数据绑定与双向'

            }
        })
    </script>

</body>

到了这里,关于v-bind与v-model的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】双向绑定 v-model

    2024年01月22日
    浏览(36)
  • 在vue2使用v-model对组件进行双向绑定

    v-model=“visible” 等价于 :value=“visible” 加上 @input=“visible = $event” 所以 v-model 就是父组件向子组件传了个 value 字段的值,子组件使用 props 定义 value 字段, 就可以在子组件使用 value 读取这个值;子组件使用 $emit(‘input’,值) 就可以改变 v-model 的值 父组件 子组件 父组件 子

    2024年02月10日
    浏览(34)
  • 【vue2第十一章】v-model的原理详解 与 如何使用v-model对父子组件的value绑定 和修饰符.sync

    v-model的原理详解 v-model的本质就是一个语法糖,实际上就是 :value=\\\"msg\\\" 与 @input=\\\"msg = $event.target.value\\\" 的简写。 :value=\\\"msg\\\" 从数据单向绑定到input框,当data数据中的msg内容一旦改变,而input框数据也随之改变。 @input=\\\"msg = $event.target.value\\\" 是为input框绑定了input事件,内容改变则触发

    2024年02月10日
    浏览(30)
  • vue2--1. 内容渲染指令 2. 属性绑定指令 3. 事件绑定 4. v-model 指令 5. 条件渲染指令

    2. 属性绑定指令 3. 事件绑定 4. v-model 指令 5. 条件渲染指令) List item 推荐大家安装的 VScode 中的 Vue 插件 Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets Vetur https://marketplace.visualstudio.com/items?itemName=octref.vetur 什么是 vue 构建用户界面 用 vue 往 html 页面中填充

    2024年02月05日
    浏览(44)
  • element ui input 深层循环v-model绑定默认数据删除不了的情况

    例子: 在项目开发中遇到的,简单记录一下  给input一个@input方法  使其更新视图,这样子就可以正常编辑删除了 出现这种情况是vue不能检测到对象属性的添加或者删除导致视图无法更新

    2024年02月15日
    浏览(44)
  • uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)

    VUE中父子组件传递数据的基本套路: 父传子 props 子传父 this.$emit(\\\'事件名\\\', \\\'数据\\\'); 使用 sync 修饰符,实现 支持同步数据 因为用的是 uniapp 开发小程序,所以要考虑到兼容性问题,不要把自己当正经VUE2。 小程序虽然支持 v-model 指令,但不支持 model 选项。 所以要么子组件中声

    2024年02月15日
    浏览(32)
  • v-model绑定的数据与接收到的数据类型不一致引发的bug

    在使用v-model的过程中 当页面渲染需要的数据类型与data中定义的数据类型不一致时,页面是不会进行响应式对应渲染的、 如:1:绑定的是string的时候,在定义时是number类型 也会导致页面不更新 2:列表下拉框的选中的数据若定义的是number的话,传递进去string也是不会进行渲染的

    2024年02月16日
    浏览(34)
  • 【前端】Element-ui el-select 绑定 v-model 不生效问题汇总

    1、 v-model 绑定的值与下拉选项的值类型不一致。 2、绑定的值未声明。 如上所示,需要具体声明。 3、value 前 需要加 冒号  : 

    2024年02月03日
    浏览(34)
  • vue项目中对组件使用v-model绑定值,在vue3中如何更新数据

    在el-form 中 el-form-item 绑定组件进行校验 想在表单下面爆红提示 可以对组件使用v-model绑定值 vue2 通过this.$emit(‘input’,value) 更新 v-model值 vue3 通过this.$emit(‘update:modelValue’ ,value) 更新 v-model值

    2024年02月15日
    浏览(44)
  • vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错

    vue3的项目中, 升级了vant的版本(^4.0.7)后, 子组件中用v-model的地方出现了报错 v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits update:x event instead. 在阅读vue3的文档中看到了这么一段话 所有的 props 都遵循着单向绑定原则

    2024年02月04日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包