Vue指令之`v-model`和`双向数据绑定

 v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定
<input type="text" v-bind:value="msg" style="width:100%;">
 使用  v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定 
注意: v-model 只能运用在 表单元素中
input(radio, text, address, email....)   select    checkbox   textarea
    <div class="box">
      <input type="text" v-model="xx">
      <input type="button" value="D" @click='show'>
    </div>
    <!-- 使用v-model双向数据绑定之后,在input标签中修改任何信息,data中的值都会改变 -->
    <!-- 可以在浏览器中使用检查元素=> console选项,我们最大的对象window,其中Vue   vm的
    实例也是window的,使用vm.xx  就可以显示信息-->
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:'.box',
            data:{
                xx:'大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
            },
            methods:{
                show(){
                    alert(this.xx);
                }
            }
            

        });

 

 

 

 

 

posted @ 2019-09-23 16:03  WhiteSpace  阅读(728)  评论(0编辑  收藏  举报