对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实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
AngularJS获取json数据的方法详解
May 27 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 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实现维护文件代码
2007/06/14 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
python输入错误密码用户锁定实现方法
2017/11/27 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
python实现感知机模型的示例
2020/09/30 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
python推导式的使用方法实例
2021/02/28 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
电子邮箱格式怎么写
2014/01/12 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Promise静态四兄弟实现示例详解
2022/07/07 Javascript