动态绑定class样式

1. 字符串写法

语法： :class=“className”
适用范围： 样式的类名不确定，需要动态指定。
举例说明： 点击一个元素更改其绑定的类名。

<template>
  <div>
    <div :class="fontColor" @click="changeClass">test</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fontColor: 'red'
    }
  },
  methods: {
	changeClass() {
		this.fontColor = 'green';
	}
  }
}
</script>

<style>
.red {
	color: #ff0000;
}
.green {
	color: #00ff00;
}
</style>

点击前后元素效果：

点击之前：<div class="red">test</div>
点击之后：<div class="green">test</div>

2. 数组写法

语法： :class=“classArr”
适用范围： 绑定的样式个数不确定（可以添加或删除任意一个class），名字也不确定。
举例说明： 一个元素绑定多个class，点击添加或删除class。

<template>
  <div>
    <div :class="classArr" @click="delClass">test</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classArr: ['basic', 'bg', 'content'],   
    }
  },
  methods: {
	delClass() {
		this.classArr.pop();
	}
  }
}
</script>

<style>
.basic {
	width: 200px;
	height: 200px;
	border: 1px solid #000;
}
.bg {
	background: skyblue
}
.content {
	color: #ff0000;
}
</style>

点击前后元素效果：

点击之前：<div class="basic bg content">test</div>
点击之后：<div class="basic bg">test</div>

数组第二种写法：

<div :class="[isBasic,isBg]">test</div>
data() {
  return{
    isBasic:'basic',
    isBg:'bg'
 }
}

数组结合三元表达式：

<div :class="[flag === true ? isBasic : isBg]">test</div>
//或者
<div :class="[flag === true ? 'basic' : 'bg']">test</div>
data() {
  return{
    flag: true,
    isBasic:'basic',
    isBg:'bg'
 }
}

3. 对象写法

语法： :class=“classObj”
适用范围： 要绑定的样式个数确定，名字也确定，但是要动态决定是否使用。
举例说明： 有两个class样式，第一个使用，第二个不使用。

<template>
  <div>
    <div :class="classObj">test</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classObj: {
      	basic: true,
      	bg: false
      }
    }
  }
}
</script>

<style>
.basic {
	width: 200px;
	height: 200px;
	border: 1px solid #000;
}
.bg {
	background: skyblue
}
</style>

元素效果：

<div class="basic">test</div>

对象第二种写法：

<div :class="{basic: isBasic, bg: isBg}">test</div>
data() {
  return{
    isBasic: true,
    isBg: false
 }
}