对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、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
深入理解Node module模块
Mar 26 Javascript
vue写一个组件
Apr 09 Javascript
react 组件传值的三种方法
Jun 03 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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分页实例代码分享
2011/07/28 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
功能强大的php文件上传类
2016/08/29 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
详解Vue组件之作用域插槽
2018/11/22 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
关于随地扔垃圾的检讨书
2014/09/30 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
Python简易开发之制作计算器
2022/04/28 Python