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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 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);
                }
            }
        });

以上是 Vue指令之`v-model`和`双向数据绑定 的全部内容， 来源链接： utcz.com/z/376657.html

回到顶部