vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单。详细看代码
<template>
<div class="app" :class="[show===true ? 'border' : '' , background_red=== true ? 'red' : '']" >
</div>
</template>
<script>
export default {
data(){
return {
show: true
background_red:true
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.app{
width: 100%;
}
.red{
background-color: red;
}
.border{
border: 1px solid red;
}
</style>