v-model——双向数据绑定

最新推荐文章于 2023-07-08 16:42:03 发布

何迟

最新推荐文章于 2023-07-08 16:42:03 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.youkuaiyun.com/qq_42036616/article/details/82810140

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章

订阅专栏

Vue

31 篇文章

订阅专栏

本文解析了Vue.js中v-model与v-bind的区别，重点强调v-model实现双向数据绑定，仅适用于表单元素，而v-bind用于单向绑定。通过实例代码展示了两者在实际应用中的表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：

1.v-model双向绑定，v-bind只能单项绑定

2.v-model只能用在表单元素中

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
       <div id="app">
           <h3>{{ msg }}</h3>

           <input type="text" v-bind:value="msg" style="width:100%">
           <!--如果忘记写v-bind则是直接将input赋值为msg，而并没有绑定事件-->

           <input type="text" v-model="msg" style="width:100%">
       </div>

       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   msg:'陈小帅是真的帅'
               },
               methods:{}
           });
       </script>
</body>
</html>

效果：