对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操作userdata
Apr 27 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 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使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Python自定义线程类简单示例
2018/03/23 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
如何在python中实现随机选择
2019/11/02 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python 5个实用的技巧
2020/09/27 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
只用Python就可以制作的简单词云
2021/06/07 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python