条件渲染样式 :Style
对象
js
<div :style="{ 'color': ( isActive ? 'orange' : 'red' ) }"></div>
<div :style="{ 'color': ( isActive ? 'orange' : 'red' ) }"></div>
打印
js
isActive未定义打印结果为red
isActive未定义打印结果为red
条件渲染样式 :Class
js
<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>
打印
js
isActive定义打印结果为.div_1
isActive定义打印结果为.div_1