Vue.js每天必学之Class与样式绑定


Posted in Javascript onSeptember 05, 2016

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

绑定 HTML Class

尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class=”{{ className }}”{% endraw %}`,但是我们不推荐这种写法和 `v-bind:class` 混用。两者只能选其一!

对象语法

我们可以传给 v-bind:class 一个对象,以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存:

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {
 isA: true,
 isB: false
}

渲染为:

<div class="static class-a"></div>

当 isA 和 isB 变化时,class 列表将相应地更新。例如,如果 isB 变为 true,class 列表将变为 "static class-a class-b"。

你也可以直接绑定数据里的一个对象:

<div v-bind:class="classObject"></div>

data: {
 classObject: {
 'class-a': true,
 'class-b': false
 }
}

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。

数组语法

我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:

<div v-bind:class="[classA, classB]">

data: {
 classA: 'class-a',
 classB: 'class-b'
}

渲染为:

<div class="class-a class-b"></div>

如果你也想根据条件切换列表中的 class,可以用三元表达式:

<div v-bind:class="[classA, isB ? classB : '']">

此例始终添加 classA,但是只有在 isB 是 true 时添加 classB 。

不过,当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中,可以在数组语法中使用对象语法:

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
 activeColor: 'red',
 fontSize: 30
}

直接绑定到一个样式对象通常更好,让模板更清晰:

<div v-bind:style="styleObject"></div>

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

同样的,对象语法常常结合返回对象的计算属性使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:

<div v-bind:style="[styleObjectA, styleObjectB]">

自动添加前缀

当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
js实现图片懒加载效果
Jul 17 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 #Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 #Javascript
Bootstrap使用基础教程详解
Sep 05 #Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 #Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 #Javascript
Vue.js每天必学之表单控件绑定
Sep 05 #Javascript
深入分析node.js的异步API和其局限性
Sep 05 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/11/24 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python高级特性和高阶函数及使用详解
2018/10/17 Python
python对象与json相互转换的方法
2019/05/07 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
flask框架中的cookie和session使用
2021/01/31 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
跟单文员岗位职责
2014/01/03 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
批评与自我批评材料
2014/02/15 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
行政答辩状范文
2015/05/21 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL