vue使用三元表达式动态设置style样式和class

西红柿又名小番茄

已于 2024-05-08 16:01:11 修改

阅读量2.9k

点赞数 2

文章标签： vue.js 前端 javascript

于 2024-05-08 15:58:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39293316/article/details/138575273

版权

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>