对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中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
vue之a-table中实现清空选中的数据
Nov 07 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
简单的cookie计数器实现源码
2013/06/07 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
javascript 节点排序 2
2011/01/31 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python开发之list操作实例分析
2016/02/22 Python
Python多线程爬虫简单示例
2016/03/04 Python
简单实现python进度条脚本
2017/12/18 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python Requests库基本用法示例
2018/08/20 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python实战之制作天气查询软件
2019/05/14 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
服装销售人员求职自我评价
2013/09/26 职场文书
员工工作能力评语
2014/12/31 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis