对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之典型高阶函数应用介绍
Jan 10 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP入门速成教程
2007/03/19 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
php简单截取字符串代码示例
2016/10/19 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
js 函数的副作用分析
2011/08/23 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python 自动提交和抓取网页
2009/07/13 Python
编程语言Python的发展史
2014/09/26 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python 自动识别并连接串口的实现
2021/01/19 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
法学函授自我鉴定
2014/02/06 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
青春励志演讲稿
2014/04/29 职场文书
学习党代会心得体会
2014/09/05 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书