04-v-model双向数据绑定

凇戈

于 2019-09-29 23:01:54 发布

阅读量146

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_42443397/article/details/101724269

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文通过一个示例展示了如何在Vue.js中实现双向数据绑定，包括使用v-bind和v-on指令来同步输入框的值与数据模型。这有助于理解Vue的数据响应机制。

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <div id="app"></div>
   <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
   <script type="text/javascript">
       new Vue({
           el:'#app',
           template:`
               <div>
               
                   <input type="text" v-bind:value = 'msg' v-on:input = 'change'/>
                   <p>{{ msg }}</p>
               </div>
           `,
           data:function(){
               return {
                   msg:'hello 双向绑定'
               }
           },
           methods:{
               change(e){
                   console.log(e.target.value);
                   this.msg = e.target.value;
               }
           }
       });
   </script>

</body>
</html>