v-model 相当于一个v-on和一个v-bind的叠加

最新推荐文章于 2023-03-13 09:32:25 发布

原创最新推荐文章于 2023-03-13 09:32:25 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文通过一个简单的示例详细解析了Vue.js中v-model的工作原理。通过双向数据绑定机制，实现输入框值与data中message属性的同步更新。具体展示了如何使用input事件监听器和Vue实例的方法来更新组件的状态。

<!DOCTYPE html>
<HTML>
    <head>
        <meta charset="utf">
        <title>v-model原理</title>
    </head>
    <body>
        <div id="app">
            <input type="text" 
            :value="message"
            @input="valuechage( )">//种一个bug
            <div>{{message}}</div>
            
        </div>
        <script src="./vue.js"></script>
        <script>
            var app = new Vue({
               el:'#app',
               data:{
                   message: 123,
               } ,
               methods:{
                    valuechage(event){
                        this.message = event.target.value;
                    }
               },
            })
        </script>
    </body>
</HTML>