对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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
vue 实现把路由单独分离出来
Aug 13 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的5个入手程序
2006/11/23 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
常用jQuery代码分享
2015/07/14 Javascript
angular.bind使用心得
2015/10/26 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python中的元类编程入门指引
2015/04/15 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
Python networkx包的实现
2020/02/14 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
领导接待方案
2014/03/13 职场文书
出纳员岗位职责
2014/03/13 职场文书
初中学习计划书范文
2014/09/15 职场文书
保研导师推荐信
2015/03/25 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Python类方法总结讲解
2021/07/26 Python