vue css 写法大全

<style scoped>
  .isActive {
    position: relative;
    color: #348EED;
    background: #BFBFBF;
    border: #000c17;
    width: 30px;
    height: 50px;
  }
  .left {
    left: 50px;
    margin-left: 50px;
  }
</style>

1.普通写法

直接把变量给css值 变量的值是字符串正常的css
<div :class="isActive"></div>
//js 
return  isActive: 'isActive left'

2. 对象写法

isActive是否显示 取决于isAct2 是true还是fales  true 就正常显示 false 隐藏    和if判断一样
<div :class="{isActive:isAct2,left:left2}"></div>
//js
    isActive: 'isActive left',
    isAct2: true,
    left2: false,

3.数组写法

本质上和普通写法一样
<div :class="isAct3"></div>
//js
isAct3: ['isActive', 'left'],

4.三元写法

三元 if + else 
<div :class="isAct4?'isActive':''"></div>
//js
isActive: 'isActive left',
isAct4: true,

5.转回原始写法

在大括号中的值不再是变量而是原始的css值
<div :class="{isAct5}"></div>

6.style

等同于正常的css,但是可以在里面加逻辑 如判断
<Button @click="left" :style="style2">左</Button>
//js
computed: {
// 计算属性
 style2() {
      return {
          color: this.isAct2 ? 'red' : 'blue',
          fontSize: '80px'
      }
  }
}