v-bind 和 v-model 的区别

LCLANNADT

已于 2022-04-23 14:37:04 修改

阅读量5.4k

点赞数 4

文章标签： java vue

于 2022-04-23 14:34:43 首次发布

本文链接：https://blog.csdn.net/m0_57545353/article/details/124363495

版权

本文通过实例代码对比介绍了Vue中的v-bind和v-model的用法，展示了它们在单向绑定和双向绑定上的差异。v-bind仅实现单向数据流，当在input元素中更改值时，不会影响数据；而v-model则实现了双向数据绑定，input的改动会同步到数据中。

摘要由CSDN通过智能技术生成

v-bind 是单向绑定，绑定的是value （如果想改变值只能在data数据里面改，在input标签里无法修改）此外他的语法糖是":"举一个小例子

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <input type="text" v-bind:value="message" />
    <h2>您输入的值是:{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:'你好啊',
        },
        methods:{

        }
    })
</script>
</body>
</html>

删除input框中的“好啊”，下方的值并没有改变，所以是单向的。

v-model是双向绑定，而且绑定的也是value，修改input里面的值，下面的message 的值也会改变，例子如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <!-- <input type="text" v-bind:value="message" /> -->
    <input type="text" v-model="message" />
    <h2>您输入的值是:{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:'你好啊',
        },
        methods:{

        }
    })
</script>
</body>
</html>

增加“，我的朋友！”，发现下方的值也跟着改变了，说明是双向的。

本文参考：v-bind 和 v-model 的区别_weixin_45829555的博客-CSDN博客_v-bind

LCLANNADT

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫