绑定class和style
- vue中绑定class和style，其实就是用v-bind指令
- 但是针对class和style，vue做了增强，在这两个特性使用v-bind的时候可以表达式的结果，除了字符串，还可以是对象和数组。
- 具体看以下例子
class例子
- 模版
<!--对象形式-->
<div v-bind:class="{ active: isActive }"></div>
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
<!--绑定的数据对象也可以不在模版里面，可以写在js中data里面-->
<div v-bind:class="classObject"></div>
<!--也可以写在计算属性里面-->
<div v-bind:class="classObject1"></div>
<!--数组形式-->
<div v-bind:class="[activeClass, errorClass]"></div>
<!--也可以写三元运算符-->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<!--也可以在数组语法中使用对象形式-->
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
- js数据
data: {
isActive: true,
hasError: false,
classObject: {
active: true,
'text-danger': false
},
error: null,
activeClass: 'active',
errorClass: 'text-danger'
}
computed: {
classObject1: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
- 结果渲染
<!--对象形式-->
<div class="active"></div>
<div class="static active"></div>
<!--数据对象没有放在模板里面-->
<div class="active"></div>
<!--写在计算属性里面-->
<div class="active"></div>
<!--数组形式-->
<div class="active, text-danger"></div>
<!--三元运算符-->
<div class="active, text-danger"></div>
<!--数组语法中使用对象形式-->
<div class="active, text-danger"></div>
style例子
- v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
- 自动添加前缀
- 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀
- 多重值
- 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值
- 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
- 模板
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!--直接绑定到一个样式对象通常更好，这会让模板更清晰-->
<div v-bind:style="styleObject"></div>
<!--数组语法，数组中的每个元素都是一个js对象-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<!--多重值-->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
- js数据
data: {
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'red',
fontSize: '13px'
},
baseStyles: {
color: 'black'
},
overridingStyles: {
fontSize: '20xp'
}
}
- 渲染结果
<div style="color: red; font-size: 30xp"></div>
<!--直接绑定到一个样式对象通常更好，这会让模板更清晰-->
<div style="color: red; font-size: 13xp"></div>
<!--数组语法-->
<div style="color: black; font-size: 20xp"></div>
<!--多重值， 如果浏览器支持不带浏览器前缀的 flexbox-->
<div style="display: flex"></div>
