:class=" 这里面可以是数组形式和对象形式 "
如图
效果
代码如下
<template>
<div>
<div :class="[index === 1 ?'box':'',{'color': index === 1}]">
<p :class="{'font':true}">改变的字体色彩</p>
</div>
</div>
</template>
<script>
export default {
name: 'stest',
data () {
return {
index:1
}
},
computed: {},
methods: {
},
}
</script>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid;
}
.color{
font-size: 2em;
}
.font{
color: blue;
}
</style>