详解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实现无限级select联动菜单
Jan 02 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
js控制div弹出层实现方法
May 11 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
浅谈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中str_replace函数使用小结
2008/10/11 PHP
php 全局变量范围分析
2009/08/07 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
详解Python中的文本处理
2015/04/11 Python
python实现的简单抽奖系统实例
2015/05/22 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
利用python开发app实战的方法
2019/07/09 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
yy生日主持词
2014/03/20 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python