对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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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
PHP 学习路线与时间表
2010/02/21 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python程序需要编译吗
2020/06/19 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
先进德育工作者事迹材料
2014/01/24 职场文书
公司拓展活动方案
2014/02/13 职场文书
银行求职自荐信范文
2015/03/04 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
导游词之包公祠
2019/11/25 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
go开发alertmanger实现钉钉报警
2021/07/16 Golang
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL