vue学习-class style绑定

1.class绑定方式

1.对象语法绑定（class名称有-的需要用''）

red-a和bold是否在这个div出现，取决于属性isRed和isBold

<div :class="{'red-font': isRed, bold: isBold}">红色加粗</div>

 

2.classObj不内联

<div :class="classObj">加粗</div>

data() {
    return { 
      classObj: {
        bold: true,
      }
    }
  }

3.classObj为计算属性(常用且强大)

<div :class="classCmp">红色</div>

  computed: {
    classCmp() {
      return {
        'red-font': this.isRed
      }
    }
  }

4.数组语法

<div :class="[classA, classB]">红色加粗</div>
<div :class="classA">红色</div>

  data() {
    return { 
      classA: 'red-font',
      classB: 'bold'
    }
  }

5.来自父组件的class

<div id="father">
  <child-component class="father-class"></my-component>
</div>

当子组件只有一个根元素的时候，来自父组件的class会直接加到这个根元素上

如： <div class="child-class father-class" data-v-0999612c="">

<template>
<div class="child-class">
......
</div>
</template>

当子组件有多个根元素，那么都不会生效。除非使用$attrs定义哪些元素（不需要为根元素）接受来自父组件的类

<template>
  <div>没有父元素的class</div>
  <div>
    没有父元素的class
    <div :class="$attrs.class">有父元素的class</div>
  </div>
  <div :class="$attrs.class">有父元素的class</div>
</template>

 

---

2.style绑定方式

style绑定方式和class基本一样：styleObj  styleCmp  数组语法。只是没有来自父组件的style写法

<div :style="styleObject">黄色</div>

data() {
    return {
      styleObject: {
        color: 'yellow',
      }
    }
  },

多重值，常用于提供多个带前缀的值

这样写只会渲染数组中最后一个被浏览器支持的值（意思后面的值优先使用，除非不支持）

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

<div :style="{ color: ['red', 'green', 'yellow233'] }">绿色</div>