1、使用三元表达式，根据条件动态改变style样式
<p :style="{color:state?'#ff9933':'#ff0000'}">hello world </p>
<script>
export default {
data() {
return {
state: true
}
}
}
</script>
2、使用三元表达式，根据条件动态设置class
<div id="app">
<div :class="[cardClass, isActive ? activeCard : '']"></div>
</div>
<script>
export default {
data() {
return {
isActive:true,
cardClass:'card',
activeCard:'active',
}
}
}
</script>
<style scoped>
.card {
color: '#ff0000'
}
.active {
color:'#ff9933'
}
</style>
