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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
js判断密码强度的方法
Mar 18 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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 curl模拟post提交数据示例
2013/12/31 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python实现简单遗传算法
2020/09/18 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
《桂花雨》教学反思
2014/04/12 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
高一数学教学反思
2016/02/18 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby