浅析Vue.js中v-bind v-model的使用和区别


Posted in Javascript onDecember 04, 2018

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

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

<body>
  <div class="app">
    <span>Multiline message is:</span>
    <p>{{message}}</p>
    <br>
    <textarea name="" v-model="message" placeholder="please write..."></textarea>
  </div>

</body>
<script>
  new Vue({
     el:'.app'
  })
</script>

checkbox

<body>
  <div class="app">
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">jack</label>
    <input type="checkbox" id="John" value="John" v-model="checkedNames">
    <label for="jack">John</label>
    <input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
    <label for="jack">Mike</label>
    <br>
    <span>Checked names:{{checkedNames}}</span>
  </div>
  
</body>
<script>
  new Vue({
     el:'.app',
     data:{
       checkedNames:[]
     }
  })
</script>

v-bind

有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性

总结

以上所述是小编给大家介绍的Vue.js中v-bind v-model的使用和区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 #Javascript
React事件处理的机制及原理
Dec 03 #Javascript
JointJS流程图的绘制方法
Dec 03 #Javascript
微信小程序之事件交互操作实例分析
Dec 03 #Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 #Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 #Javascript
Vue.js 图标选择组件实践详解
Dec 03 #Javascript
You might like
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python高并发和多线程有什么关系
2020/11/14 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
广播体操口号
2014/06/18 职场文书
党支部四风整改方案
2014/10/25 职场文书
贷款承诺书
2015/01/20 职场文书
邀请函范文
2015/02/02 职场文书
英语演讲开场白
2015/05/29 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
pytorch--之halfTensor的使用详解
2021/05/24 Python