vue中v-bind与v-model的区别举例详解
更新时间：2023年09月11日 09:14:22 作者：哆啦哆啦AA
这篇文章主要给大家介绍了关于vue中v-bind与v-model区别的相关资料,v-model和v-bind是Vue.js框架中的两个常用指令,文中通过图文介绍的非常详细,需要的朋友可以参考下
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中的值，文本框也会变
修改文本框的值，data不会变
使用v-model双向绑定
文本框的内容变化，data中的值也会变，反之如此；同时单向文本框的内容也会变化，因为data变化了。
<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>总结
到此这篇关于vue中v-bind与v-model区别的文章就介绍到这了,更多相关v-bind与v-model区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue+elementUI如何实现顶部路由标签跳转问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
打开尤大大的GitHub，发现多了个叫 petite-vue 的东西,Vue3 和 Vite 还没学完呢，又开始整新东西了？本文就来介绍一下2021-07-07
这篇文章主要为大家详细介绍了Vue生命周期的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了vue监听页面滚动到某个高度触发事件流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了如何在 Vue 3 中生成动态的 Word 文档,在开发过程中遇到一个需求,动态生成一个word报表,当时考虑了是前端做还是后端做的问题,最后发现两个解决需求的方法都大差不差,但考虑到前端少发一个请求,就此使用的前端来解决,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了通过vue手动封装on，emit，off的代码详解，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
vue-router history模式服务器端配置过程记录
vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下2021-06-06
vee-validate vue 2.0自定义表单验证的实例
今天小编就为大家分享一篇vee-validate vue 2.0自定义表单验证的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue.component的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论