详解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 相关文章推荐
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
js运动动画的八个知识点
Mar 12 Javascript
Javascript中replace()小结
Sep 30 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
layer扩展打开/关闭动画的方法
Sep 23 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php中大括号作用介绍
2012/03/22 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
django实现后台显示媒体文件
2020/04/07 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
市场营销专业应届生自荐信
2014/06/19 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
keepalived + nginx 实现高可用方案
2022/12/24 Servers