对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 验证表单(form)中的单选(radio)值
Sep 08 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
puppeteer库入门初探
Jan 09 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
javascript简易画板开发
2020/04/12 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python3安装Pymongo详细步骤
2017/05/26 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python 搜索大文件的实例代码
2019/07/08 Python
python实现同一局域网下传输图片
2020/03/20 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
单位授权委托书范文
2014/08/02 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
Python matplotlib绘制雷达图
2022/04/13 Python
Linux中sftp常用命令整理
2022/06/28 Servers