1、Vue 中 class 和 style 的绑定
在 Vue 中,可以通过数据绑定来操作元素的 class 列表和内联样式,操作 class 和 style 是用 v-bind 来绑定的。在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强,表达式结果的类型除了字符串之外,还可以是对象或数组。
v-bind: class 指令可以与普通的 class 属性共存,并不会冲突或者覆盖。
当在一个自定义组件上使用 class
属性时,这些 class 将被添加到该组件的根元素上面,这个元素上已经存在的 class 不会被覆盖。
1.1、绑定 class
1.1.1、字符串语法
字符串语法也就是直接在 v-bind:class 后面直接写表达式。
<div v-bind:class="'red_class'"> div3 </div> .red_class { background: red; }
1.1.2、对象语法
对象语法就是在 v-bind:class
的表达式语法里写入一个对象。该对象的属性名是类名,属性值的 true 或者 false 决定该属性名是否添加进类名中。
<div v-bind:class="{ red_class : false" > div1 </div> <div v-bind:class="{ 'red_class' : classBol, 'green_class': true > <!--属性名可以写成字符串--> div2 </div> <div v-bind:class="classObj"> <!--也可以直接写对象变量--> div3 </div> data: { classBol: true, classObj: { red_class: true } }
判断该对象的属性值是 true 或者 false 的依据跟 JS 一般情况下判断数据的布尔值一样,比如:0为false,1为true,null 为false。
1.1.3、数组语法
可以把一个数组传给 v-bind:class
,以应用一个 class 列表。数组语法和对象语法不同,在数组语法中,数组项是变量名,类名取决于该变量名的值,值是什么,类名就是什么。
<div v-bind:class="[redClass, greenClass]"></div> data: { redClass: 'red_class', greenClass: 'green_class' } <!-- 最终渲染 --> <div class="red_class green_class"></div>
在数组中也可以使用三元表达式,并且数组项也可以是对象
<div v-bind:class="[true? redClass : '', greenClass]"></div> <!-- 三元表达式,不过数组项仍是变量 --> <div v-bind:class="[{ red_class: false }, greenClass]"></div> <!-- 数组项中使用对象 --> data: { redClass: 'red_class', greenClass: 'green_class' }
1.2、绑定 style
当 v-bind:style
使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform
,Vue会自动侦测并添加相应的前缀。
1.2.1、对象语法
<div v-bind:style="{ color: colorVal, fontSize: sizeVal + 'px' }"></div> <div v-bind:style="styleObject"></div> <!--直接绑定一个对象变量--> data: { colorVal: 'red', sizeVal: 30, styleObject: { color: 'red', fontSize: '13px' } }
1.2.2、数组语法
绑定 style 的数组语法的数组项是对象,其实就是可以将多个样式对象绑定到元素上。
<div v-bind:style="[baseObj, otherObj]"></div> data: { baseObj: { color: 'red' }, otherObj: { fontSize: '13px' } }