对Vue- 动态元素属性及v-bind和v-model的区别详解


Posted in Javascript onAugust 27, 2018

Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令:

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:

<button v-bind:disabled="someDynamicCondition">Button</button>

从一开始学习的时候我们就知道v-bind是可以绑定属性和数据的,而v-model也一样可以绑定数据,那么v-bind和v-model的区别在哪里?

1:如果 id={{xxx}}这种写法,则HTML实际上是这样的:id="{{ xxx}}"

2:v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id

3:v-model也可以绑定数据,但是他是用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

1:v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值="表达式"

<input class="frmD" type="hidden" v-bind:lenderEnterprise.name="check4EP.name?lenderEnterprise.name:null"/>

2:v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id

3:v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

以上这篇对Vue- 动态元素属性及v-bind和v-model的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
ExpressJS入门实例
Jan 14 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
Javascript基础之数组的使用
May 13 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
js实现分页功能
May 24 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
element多个表单校验的实现
May 27 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
vue实例中data使用return包裹的方法
Aug 27 #Javascript
vue项目打包部署到服务器的方法示例
Aug 27 #Javascript
You might like
PHP下10件你也许并不了解的事情
2008/09/11 PHP
PHP PDO函数库详解
2010/04/27 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php生成圆角图片的方法
2015/04/07 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python numpy 显示图像阵列的实例
2018/07/02 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python any()函数的使用方法
2019/10/28 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
super关键字的用法
2012/04/10 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
计算机操作自荐信
2013/12/07 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
初婚初育证明
2014/01/14 职场文书
总经理司机岗位职责
2014/02/06 职场文书
护士的自我鉴定
2014/02/07 职场文书
管理失职检讨书范文
2015/05/05 职场文书