对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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 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
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
JS实现判断有效的数独算法示例
2019/02/25 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python中asyncore的用法实例
2014/09/29 Python
python连接MySQL数据库实例分析
2015/05/12 Python
keras导入weights方式
2020/06/12 Python
python实现按日期归档文件
2021/01/30 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
外包公司软件测试工程师
2014/11/01 面试题
中专毕业自我鉴定
2013/10/16 职场文书
学生会主席事迹材料
2014/01/28 职场文书
机关门卫制度
2014/02/01 职场文书
一句话工作感言
2014/03/01 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
怎样写辞职信
2015/02/27 职场文书
golang中的空slice案例
2021/04/27 Golang
详解TypeScript的基础类型
2022/02/18 Javascript
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers