对象方式添加
<template>
<div>
<ul>
<li class="item ">首页</li>
<li class="item" :class="{'active':isActive}">详情</li>
<li class="item">列表</li>
</ul>
</div>
</template>
数组方式添加
<template>
<div>
<ul>
<li class="item ">首页</li>
<li class="item" :class="['avtive']">详情</li>
<li class="item">列表</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
isActive:true
}
}
}
</script>
内联样式添加
<template>
<div>
<ul>
<li class="item ">首页</li>
<li class="item" :style="setStyle">详情</li>
<li class="item">列表</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
isActive:true,
setStyle:{
backgroundColor:'pink',
color:'#f00'
}
}
}
}
</script>
动态类名样式
最新推荐文章于 2023-10-24 10:00:00 发布