浅析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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
详细介绍Next.js脚手架完整搭建封装
Apr 26 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
在vue中使用setInterval的方法示例
2019/04/16 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
食品安全责任书
2014/04/15 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript