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中对表单的基本操作代码
Jul 29 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
js中键盘事件实例简析
Jan 10 Javascript
初识Node.js
Mar 20 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
js实现3d悬浮效果
Feb 16 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 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
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python实现简单名片管理系统
2018/11/30 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
物流专业求职计划书
2014/01/10 职场文书
自我鉴定书
2014/03/24 职场文书
年会主持词结束语
2014/03/27 职场文书
机关会计岗位职责
2014/04/08 职场文书
大学班级文化建设方案
2014/05/06 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers