vue动态绑定class和style，三目运算符条件判定

参考文章：
vue动态绑定class和style，三目运算符条件判定
vue项目中使用三元运算符来更改class（附源码）

项目实战如下
template 中定义

<div :class="[ifAuth.includes('1') ? 'box_wrap2 box_wrap2_1 hy_cel active' : 'box_wrap2 box_wrap2_1 hy_cel']"
 @click="checktt('1')">

script 中data() 定义

    return {
      ifAuth: [],
    };

methods 定义

checktt(i){
     // 在该项目需求中是，点击一个div，可以亮起来
     // 再次点击同一个div则变灰
      if ( this.ifAuth.indexOf(i)!=-1){
        this.ifAuth.splice(this.ifAuth.indexOf(i),1)
      }else {
        this.ifAuth.push(i)
      }
    },

style 定义

.box_wrap2 box_wrap2_1 hy_cel active {
background: url("~@/assets/images/c.png") no-repeat;
}
.box_wrap2 box_wrap2_1 hy_cel{
background: none;
}

如果是改官方组件市场里面的组件内样式
注意关键点：
1.在你想要修改的组件外面套一层div 命名class
2.scoped 表示只有当前页面受到影响 有scss的地方一定要用deep；不用scss时就要用>>>
(https://blog.csdn.net/qq_45677671/article/details/126034538)

示例如下：

<template>
<view>
<uni-card title="" sub-title="" extra="" v-for="(item,index) in hfListData">
				<view :class="[item.modifytime!=undefined ? 'custom-section-ys1' : 'custom-section-ys2']">
					<uni-section :title=item.maintitle type="circle">
						<uni-collapse ref="collapse" v-model="value2" @change="change">
							<uni-collapse-item :title="'建议内容 ('+item.createtime+')'">
								<view class="content">
									<text class="text">{{item.content}}</text>
								</view>
							</uni-collapse-item>
							<uni-collapse-item :title="'回复 ('+item.modifytime+')'" v-if="item.modifytime!=undefined">
								<view class="content">
									<text class="text">{{item.hfnr}}</text>
								</view>
							</uni-collapse-item>
							<uni-collapse-item title="未回复" v-if="item.modifytime==undefined">
							</uni-collapse-item>
						</uni-collapse>
					</uni-section>
			    </view>
</uni-card>
<view>
</template>

<style lang="scss" scoped>
     /*子组件，h5,APP,小程序均可生效*/
	/deep/ .custom-section-ys1 .uni-section {
		.uni-section-header__decoration {
			background-color: #55aa00;
		}

		.uni-section-header__decoration.circle {
			width: 18px;
			height: 18px;
		}
	}

	/deep/ .custom-section-ys2 .uni-section {
		.uni-section-header__decoration {
			background-color: #ffaa00;
		}

		.uni-section-header__decoration.circle {
			width: 18px;
			height: 18px;
		}
	}
</style>