对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动态设置样式style实例分析
May 13 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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如何透过ODBC来存取数据库
2006/10/09 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
django缓存配置的几种方法详解
2018/07/16 Python
分析python请求数据
2018/08/19 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
PHP如何去执行一个SQL语句
2016/03/05 面试题
项目投资建议书
2014/05/16 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js