vue 三元表达式动态绑定class

vue使用三元表达式绑定class<div :class="[isActive ? 'active' :'']">测试</div><script>export default {data () {return {isActive: true}}}</script><style scoped>.active {font-size: 16px

祖先生

17836人浏览 · 2020-09-09 16:07:51

祖先生 · 2020-09-09 16:07:51 发布

参考vue.js官网 https://vuejs.bootcss.com/guide/class-and-style.html

vue使用三元表达式绑定class
数组语法和对象语法

<div :class="[{ 'red': isActive }]"></div>
<div :class="{ 'red': isActive }"></div>
<!-- isActive = true, 结果渲染为 -->
<div class="red"></div>

<div :class="[isActive ? 'red' : 'yellow', 'blue']"></div>
<div :class="[{ 'red': isActive, 'yellow': !isActive }, 'blue']"></div>
<!-- isActive = true, 结果渲染为 -->
<div class="red blue"></div>

<script>
export default {
	data () {
		return {
			isActive: true
		}
	}
}
</script>
<style scoped>
.red {
	color: red;
}

.yellow {
	color: yellow;
}

.blue {
    color: blue;
}
</style>