vue 中 Class 与 Style 绑定 汇总

在vue中经常涉及到对元素进行样式绑定,此篇博文归纳了vue中常用到的绑定样式的八种方法. 

以如下代码为例: 现有两个样式 可以进行绑定, 其中 styleLab-box 是通用样式, 暂不考虑 (代码在文章末尾)

蓝色背景
.blue-background{
  background: #007aff;
  color: #fff;
}
//红色字体
.red-color{
  color: #ff9fa1;
}

一. class绑定

 1. 使用布尔值或表达式直接绑定样式  :class="{ '样式名' : 布尔值}"

<div class="styleLab-box" :class="{'blue-background':true}">
    蓝色背景
</div>

或者

<div class="styleLab-box" :class="{'blue-background': blueBgFlag}">
    蓝色背景
</div>
<script>
export default {
  data() {
    return {
      blueBgFlag: true
    }
  }
}
</script>

效果预览:

也可以绑定多个样式

:class="{'blue-background':true, 'red-color':true}"

效果预览:

2.使用data对象绑定样式   :class="对象" / 对象: '样式名'

<div class="styleLab-box" :class="blueClass">蓝色背景</div>
<script>
export default {
  data() {
    return {
      blueClass: 'blue-background'
    }
  }
}
</script>

也可以多样式绑定:

<div class="styleLab-box" :class="classObj">蓝底红字</div>
<script>
export default {
  data() {
    return {      
      classObj: {
        'blue-background': true,
        'red-color': true
      }
    }
  }
}
</script>

效果预览:

3.使用三目运算绑定class     :class=" '三目判断' ? '样式一':'样式二'"

<div class="styleLab-box" :class="i===2?'green-background':'blue-background'">蓝色背景
</div>

效果预览:

4. 数组语法   :class="[对象一, 对象二]" / 对象:'样式名' 

<div class="styleLab-box" :class="[blueClass, redClass]">蓝底红字</div>
<script>
export default {
  data() {
    return {
      blueClass: 'blue-background',
      redClass: 'red-color'
    }
  }
}
</script>

效果预览:

5. 数组语法搭配的三目运算

     :class="[三目表达式, 对象二]" / 对象:'样式名'

      和上面类似, 不再给出例子

二, style绑定

1. :style="{ 样式名: 值, 样式名: 值 }"

<div class="styleLab-box" :style="{ background: bludBackground, color: redColor }">蓝底红字</div>
<script>
export default {
  data() {
    return {
      bludBackground: '#007aff',
      redColor: '#ff9fa1'
    }
  }
}
</script>

效果如下:

2.:style="对象"/ 对象:{样式名: 值, 样式名: 值}

<div class="styleLab-box" :style="styleObj">蓝底红字</div>
<script>
export default {
  data() {
    return {
      styleObj:{
        background: '#007aff',
        color: '#ff9fa1',
      }
    }
  }
}
</script>

3. style数组语法    :style="[样式一, 样式二]"

<div class="styleLab-box" :style="[styleObj, styleborder]">蓝底红字绿框</div>
<script>
export default {
  data() {
    return {
      styleObj:{
        background: '#007aff',
        color: '#ff9fa1',
      },
      styleborder:{ 
        border: '5px solid #46d8ab'
      }
    }
  }
}
</script>

以上即为vue中常用的绑定样式的方法,下面附上附本文案例代码

<template>
  <div class="styleLab">
    <div class="styleLab-box">正常</div>
    <div class="styleLab-box" :class="{'blue-background':true}">蓝色背景</div>
    <div class="styleLab-box" :class="{'blue-background':true, 'red-color':true}">蓝底红字</div>
    <div class="styleLab-box" :class="blueClass">蓝色背景</div>
    <div class="styleLab-box" :class="classObj">蓝底红字</div>
    <div class="styleLab-box" :class="i===2?'green-background':'blue-background'">蓝色背景</div>
    <div class="styleLab-box" :class="[blueClass, redClass]">蓝底红字</div>

    <div class="styleLab-box" :style="{ background: bludBackground, color: redColor }">蓝底红字</div>
    <div class="styleLab-box" :style="styleObj">蓝底红字</div>
    <div class="styleLab-box" :style="[styleObj, styleborder]">蓝底红字绿框</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blueClass: 'blue-background',
      redClass: 'red-color',
      classObj: {
        'blue-background': true,
        'red-color': true
      },
      bludBackground: '#007aff',
      redColor: '#ff9fa1',
      styleObj:{
        background: '#007aff',
        color: '#ff9fa1',
      },
      styleborder:{
        border: '5px solid #46d8ab'
      }
    }
  }
}
</script>

<style scoped>
.styleLab-box{
  border: 1px solid #007aff;
  width: 48rem;
  height: 3rem;
  line-height: 3rem;
  margin: 1rem;
  text-align: center;
}

.blue-background{
  background: #007aff;
  color: #fff;
}
.green-background{
  background: #46d8ab;
}
.red-color{
  color: #ff9fa1;
}

</style>

运行效果如下: