vue.js入门教程之绑定class和style样式


Posted in Javascript onSeptember 02, 2016

一、前言

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

二、绑定 HTML Class

请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}" ,但是我们不推荐这种写法和 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 。

二、绑定内联样式

对象语法

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绑定class和style样式的全部内容,文章介绍的很详细,具有一定的参考学习价值,希望对大家学习vue.js能有所帮助,小编还会陆续更新关于vue.js的信息,感兴趣的朋友们请继续关注三水点靠木。

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
详解用node编写自己的cli工具
May 23 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
js绘制购物车抛物线动画
Nov 18 #Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 #Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 #Javascript
node.js中module.exports与exports用法上的区别
Sep 02 #Javascript
AngularJs Scope详解及示例代码
Sep 01 #Javascript
AngularJs Modules详解及示例代码
Sep 01 #Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 #Javascript
You might like
PHP 遍历文件实现代码
2011/05/04 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
网页常用特效代码整理
2006/06/23 Javascript
用 JavaScript 迁移目录
2006/12/18 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[01:44]Ti10举办地公布
2019/08/25 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python魔法方法详解
2019/02/13 Python
Python字典遍历操作实例小结
2019/03/05 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
使用django实现一个代码发布系统
2019/07/18 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
追悼会答谢词范文
2015/09/29 职场文书
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python