用input实现简单的双向数据绑定

469 阅读1分钟

input里面输入什么就显示什么,用@input绑定事件

     <div id="app">
           <input type="text" @input='inputChange' :value="msg">
           <hr>
           <p>{{msg}}</p>
    </div>
    <script>
        /* 
        数据绑定方式
           1.数据绑定到视图  {{}}
           2.视图修改数据
        */
        new Vue({
            el:"#app",
            data:{
              msg:'hehe',
            },
            methods:{
                inputChange(e){
                    console.log(e);
                   let value = e.target.value;
                   this.msg=value;
                }
            }
        })
    </script>