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对象模型-执行模型
Apr 28 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
详解在Python中处理异常的教程
2015/05/24 Python
python操作oracle的完整教程分享
2018/01/30 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python银行系统实战源码
2019/10/25 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python字典实现伪切片功能
2020/10/28 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
自我评价范文点评
2013/12/04 职场文书
车间安全生产标语
2014/06/06 职场文书
公司停电通知
2015/04/15 职场文书
聚会通知怎么写
2015/04/23 职场文书
工作会议简报
2015/07/20 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS