zoukankan      html  css  js  c++  java
  • 深入解析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据

    
    **最基础的就是实现一个联动的效果**
    
    

    <body>
    <div class="app">

    
    &lt;span&gt;Multiline message is:&lt;/span&gt;
    &lt;p&gt;{{message}}&lt;/p&gt;
    &lt;br&gt;
    &lt;textarea name="" v-model="message" placeholder="please write..."&gt;&lt;/textarea&gt;
    

    </div>

    </body>
    <script>
    new Vue({

    
     el:'.app'
    

    })
    </script>

    
    
    **checkbox**
    
    

    <body>
    <div class="app">

    
    &lt;input type="checkbox" id="jack" value="jack" v-model="checkedNames"&gt;
    &lt;label for="jack"&gt;jack&lt;/label&gt;
    &lt;input type="checkbox" id="John" value="John" v-model="checkedNames"&gt;
    &lt;label for="jack"&gt;John&lt;/label&gt;
    &lt;input type="checkbox" id="Mike" value="Mike" v-model="checkedNames"&gt;
    &lt;label for="jack"&gt;Mike&lt;/label&gt;
    &lt;br&gt;
    &lt;span&gt;Checked names:{{checkedNames}}&lt;/span&gt;
    

    </div>

    </body>
    <script>
    new Vue({

    
     el:'.app',
     data:{
       checkedNames:[]
     }
    

    })
    </script>

    
    **v-bind**
    有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性
    
    **结语**
    
    感谢您的观看,如有不足之处,欢迎批评指正。
    
     原文地址:
  • 相关阅读:
    oralce数据库创建同义词
    Oracle数据库最小脚本
    oracle数据库SQL收集整理
    文件各种上传,离不开的表单
    Apache OFBiz 研究记录01
    无IDE时编译和运行Java
    解决VM虚拟机MAC OS X 10.10.x的卡顿问题
    在java项目中使用AES256 CBC加密
    Spring4 与 Hibernate4 整合过程中的问题记录
    WIZnet官方网盘
  • 原文地址:https://www.cnblogs.com/datiangou/p/10121693.html
Copyright © 2011-2022 走看看