对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 相关文章推荐
js弹出窗口之弹出层的小例子
Jun 17 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
JavaScript实现时间表动态效果
Jul 15 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
ES6关于Promise的用法详解
May 07 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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常用函数的使用汇总
2013/06/08 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
破解Session cookie的方法
2006/07/28 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Django通过json格式收集主机信息
2020/05/29 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
什么是数据抽象
2016/11/26 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
教师师德反思材料
2014/02/15 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
记者节感言
2015/08/03 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
python如何为list实现find方法
2022/05/30 Python