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 相关文章推荐
关于jQuery object and DOM element
Apr 15 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
html实现随机点名器的示例代码
Apr 02 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
学习ExtJS Column布局
2009/10/08 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python3解析库pyquery的深入讲解
2018/06/26 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
详解Python循环作用域与闭包
2019/03/21 Python
python的turtle库使用详解
2019/05/10 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python3注册全局热键的实现
2020/03/22 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
村安全生产责任书
2014/08/25 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
python实现剪贴板的操作
2021/07/01 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技