对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当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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错误、异常处理类
2014/03/21 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
美的官方商城:Midea
2016/09/14 全球购物
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
读书活动实施方案
2014/03/10 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
会计岗位职责范本
2015/04/02 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
Python竟然能剪辑视频
2021/05/25 Python