ArcherWong博客
首页
博客
vue笔记5-class与style绑定
作者:ArcherWong
分类:vue
时间:2019-01-03 21:38:16
阅读:321
[TOC] 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理 最简单的想法是,只需要通过表达式计算出字符串结果即可。 但是在v-bind作用于class和style属性时,vue进行了专门的增强,字符串之外,还可以是对象或数组。 # 1 绑定HTML Class ## 1.1. 对象语法 ``` //模板: <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> ``` ``` //data: data: { isActive: true, hasError: false } ``` 我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式: ``` <div v-bind:class="classObject"></div> ``` ``` data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } ``` ## 1.2. 数组语法 ``` <div v-bind:class="[activeClass, errorClass]"></div> ``` ``` data: { activeClass: 'active', errorClass: 'text-danger' } ``` 也可以使用三元表达式 ``` <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> ``` 这样errorClass是用在的,activeClass只有当isactive为truthy时候才存在 不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法: ``` <div v-bind:class="[{ active: isActive }, errorClass]"></div> ``` # 2. 绑定内联样式 ## 2.1. 对象语法 ``` <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' } } <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 } ``` ## 2.2. 数组语法 v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上: ``` <div v-bind:style="[baseStyles, overridingStyles]"></div> ``` ## 2.3. 自动添加前缀 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。 ## 2.4. 多重值 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如: <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。
标签:
上一篇:
vue笔记2-计算属性和观察者
下一篇:
vue笔记3-vue条件渲染
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
golang笔记---关联数组(map)
centos7.3配置guacamole
letsencrypt证书-管理工具certbot
golang笔记---template模板语法
nginx笔记-proxy_cache缓存详解
友情链接
node文件
laravel-vue
ArcherWong的博客园