对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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
微信小程序如何获取地址
Dec 24 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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/11/03 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
js内置对象 学习笔记
2011/08/01 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python的几种主动结束程序方式
2019/11/22 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
创立科技Java面试题
2015/11/29 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
机电专业求职信
2014/06/14 职场文书
继续教育个人总结
2015/03/03 职场文书
庆七一活动简报
2015/07/20 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS