vue class与style绑定
2018-02-09 16:17
495 查看
[toc]
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理
最简单的想法是,只需要通过表达式计算出字符串结果即可。
但是在v-bind作用于class和style属性时,vue进行了专门的增强,字符串之外,还可以是对象或数组。
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:
也可以使用三元表达式
这样errorClass是用在的,activeClass只有当isactive为truthy时候才存在
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。
操作元素的 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】-(5) 计算属性与class,style绑定
- vue样式(style)和属性(class)绑定的几种基本方法
- Vue Class与Style绑定
- Vue.2.0.5-Class 与 Style 绑定
- Vue.js computed 例子 class与style绑定
- vue中,class、内联style绑定、computed属性
- Vue学习—Class与Style绑定
- Vue - class与style绑定
- Vue.js实例学习:Class 与 Style 绑定
- VUE2.0 全套 demo 讲解 基础 5(class 与 style 绑定)
- Vue中计算属性与class,style绑定
- 学习使用vue.js(五)绑定Style 与Class
- Vue.2.0.5实现Class 与 Style 绑定的实例
- vue 中动态绑定class 和 style的方法代码详解
- Vue.js 学习5 Class与Style绑定
- Vue中class与style绑定
- Vue.js笔记第二波,Class 与 Style 绑定,条件渲染,列表渲染
- vue实现切换class(与style的绑定)
- Vue.js-----轻量高效的MVVM框架(六、Class与Style绑定)
- Class 与 Style 绑定HTML Class(vue.js)