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 相关文章推荐
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
做网页的一些技巧
2007/02/01 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python实现把数字转换成中文
2015/06/29 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python中count函数简单用法
2020/01/05 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
某公司Java工程师面试题笔试题
2016/03/27 面试题
土木工程应届生自荐信
2013/09/24 职场文书
小学生暑假感言
2014/02/06 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
CPU不支持Windows11系统怎么办
2021/11/21 数码科技