Vue 样式绑定

绑定 HTML class

:class (v-bind:class 的缩写) 

:class 指令也可以和一般的 class attribute 共存

绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象

可以给 :class 绑定一个数组来渲染多个 CSS class

绑定内联样式

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性

尽管推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)

可以给 :style 绑定一个包含多个样式对象的数组

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<template>   <span>     <span class="redColor fSize bgColor"> Hello World </span><br />     <span :class="{ redColor: true, fSize: true, bgColor: true }"> Hello World </span><br />     <span :class="{ redColor: isTrue, fSize: isTrue, bgColor: isTrue }"> Hello World </span><br />     <span :class="[ 'redColor', 'fSize', 'bgColor' ]"> Hello World </span><br />       <span :style="{ color: 'red', fontSize: '20px', 'font-size':'22px' }"> Hello World </span><br />     <span :style="[ redColor, fSize]"> Hello World </span><br />       <span :class="{redColor: isActive===0}" @click="f1(0)">首页</span>     <span :class="{redColor: isActive===1}" @click="f1(1)">关于我们</span>     <span :class="{redColor: isActive===2}" @click="f1(2) ">公司产品</span>     </span> </template>   <script>   export default {     data() {       return {         isTrue: true,         redColor: {           color: 'red'         },         fSize: {           fontSize: '20px'         },         isActive: 1       }     },     methods: {       f1(i) {         console.log(i)         this.isActive = i       }     }   } </script>   <style>   .redColor {     color: red   }     .fSize {     font-size: 20px;   }     .bgColor {     background: #666;   } </style>

　　

官方文档: Class 与 Style 绑定 https://cn.vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles