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 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP XML数据解析代码
2010/05/26 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
JS实现简易计算器
2020/02/14 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
pandas如何处理缺失值
2019/07/31 Python
python 实现单例模式的5种方法
2020/09/23 Python
Java语言程序设计测试题改错题部分
2014/07/22 面试题
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
保留意见审计报告
2015/06/05 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python