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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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中动态HTML的输出技术
2006/10/09 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
如何学习Python time模块
2020/06/03 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
执行总经理岗位职责
2014/02/03 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
工作过失检讨书
2014/02/23 职场文书
大学班级学风建设方案
2014/05/01 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
音乐教师个人总结
2015/02/06 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书