zoukankan      html  css  js  c++  java
  • Vue指令之`v-model`和`双向数据绑定

     v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定
    <input type="text" v-bind:value="msg" style="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);
                    }
                }
                
    
            });
  • 相关阅读:
    hdu6315 Naive Operations
    noi.ac #525 神树的权值
    JSOI2018 潜入行动
    GXOI/GZOI2019 旅行者
    Educational Codeforces Round #67
    [六省联考2017] 分手是祝愿
    NOI2014 随机数生成器
    NOI2012 随机数生成器
    USACO19JAN Redistricting
    HNOI2015 菜肴制作
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11572849.html
Copyright © 2011-2022 走看看