浅析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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
js实现圆盘记速表
2015/08/03 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
python实现基本进制转换的方法
2015/07/11 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
运动会通讯稿500字
2014/02/20 职场文书
决心书范文
2014/03/11 职场文书
信息技术课后反思
2014/04/27 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
大专生求职信
2014/06/29 职场文书
趣味运动会广播稿
2014/09/13 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
《给予树》教学反思
2016/03/03 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Go 中的空白标识符下划线
2022/03/25 Golang
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL