条件渲染样式 :Style

对象

<div :style="{ 'color': ( isActive ? 'orange' : 'red' ) }"></div>

<div :style="{ 'color': ( isActive ? 'orange' : 'red' ) }"></div>

打印

        isActive未定义打印结果为red

        isActive未定义打印结果为red

条件渲染样式 :Class

<template>
  <div :class="isActive ? 'div_1' : 'div_2'"></div>
</template>

<script>
	export default {
		data() {
			return {
                isActive:true,
            }
        }
    }
</script>

<style>
.div_1 {}

.div_2 {}
</style>

<template>
  <div :class="isActive ? 'div_1' : 'div_2'"></div>
</template>

<script>
	export default {
		data() {
			return {
                isActive:true,
            }
        }
    }
</script>

<style>
.div_1 {}

.div_2 {}
</style>

打印

        isActive定义打印结果为.div_1

        isActive定义打印结果为.div_1