详解Vue.js动态绑定class


Posted in Javascript onDecember 20, 2016

Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。

1. 数据绑定

vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下:

<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>
简写:
<a :href="http://www.cnblogs.com/">博客园首页</a>

2. 动态绑定class

vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 class="{{ className }}" 方式设置class,但是vue不推荐这种方式与 v-bind:class 的方式混用,二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存,却可以与原生的class特性共存, 一个DOM标签中允许同时出现原生class和v-bind:class。

2.1 v-bind:class 支持string类型,不建议这样使用,因为string值是固定不变的,无法实现动态改变class的需求

HTML代码:
<div :class=" 'classA classB' ">Demo1</div>
渲染后的HTML:
<div class="classA classB">Demo1</div>

2.2 v-bind:class 支持数据变量,当变量值改变时,将同时更新class。v-bind:class指令的值限定为绑定表达式,如javascript表达式

HTML代码:
<div :class="classA">Demo2</div>
Javascript代码:
data: {
 classA: 'class-a' //当classA改变时将更新class
}
渲染后的HTML:
<div class="class-a">Demo2</div>

写在指令中的值会被视作表达式,如javascript表达式,因此v-bind:class接受三目运算:

HTML代码:
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>
渲染后的HTML:
<div class="class-a">Demo3</div>

2.3 v-bind:class 支持对象,对象改变时会动态更新class

HTML代码:
<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>
Javascript代码:
data: {
 isA: false, //当isA改变时,将更新class
 isB: true //当isB改变时,将更新class
}
渲染后的HTML:
<div class="class-b">Demo4</div>
HTML代码:
<div :class="objectClass">Demo5</div>
Javascript代码:
data: {
 objectClass: {
 class-a: true,
 class-b: false
 }
}
渲染后的HTML:
<div class="class-a">Demo5</div>

2.4: v-bind:class支持数组, 数组里的变量改变时,会动态更新class列表

HTML代码:
<div :class="[classA, classB]">Demo6</div>
Javascript代码:
data: {
 classA: 'class-a',
 classB: 'class-b'
}
渲染后的HTML:
<div class="class-a class-b">Demo6</div>

数组中可以包含object类型,数组中的object对象改变,也会更新class列表

HTML代码:
<div :class="[classA, classB]">Demo7</div>
Javascript代码:
data: {
 classA: 'class-a',
 objectClass: {
 classB: 'class-b', // classB 的值为class-b, 则将classB的值添加到class列表
 classC: false, // classC值为false,将不添加classC
 classD: true // classD 值为true,classC将被直接添加到class列表
}
}
渲染后的HTML:
<div class="class-a class-b classD">Demo7</div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
浅谈Angular的$q, defer, promise
Dec 20 #Javascript
BootStrapTable服务器分页实例解析
Dec 20 #Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 #Javascript
bootstrap多种样式进度条展示
Dec 20 #Javascript
JS封装通过className获取元素的函数示例
Dec 20 #Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 #Javascript
jquery+html仿翻页相册功能
Dec 20 #Javascript
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python解析树及树的遍历
2016/02/03 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
一个SQL面试题
2014/08/21 面试题
自荐信怎么写呢?
2013/12/09 职场文书
班干部演讲稿
2014/04/24 职场文书
财务管理专业自荐书
2014/09/02 职场文书
护士自荐信怎么写
2015/03/06 职场文书
中学教师教学工作总结
2015/08/13 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python