一切都在代码里
ps:说明一下,因为我这里没有使用 v-for 标签 ,循环,所以没有index 值,这里使用标签的id 值,代替 index

准备工作
html
<div class="up1">
      <p  id="dxal" v-on:click="addStyleOrGetDate($event)" :class="activeClass =='dxal' ? 'active':''  "  >
           典型案例
      </p>
</div>

给P标签 一个 ID

首先添加 一个点击事件 v-on:click="addStyleOrGetDate($event)"

js
//定义数据
data: {
//定义  activeClass   给默认值 0
      activeClass: "0",
 },
 //定义方法
 methods: {
	addStyleOrGetDate(e){
	//获取事件的ID 值   
	//把ID 值 赋给  activeClass 
	var onlyId=e.currentTarget.id;
         this.activeClass=onlyId;
     }
}      

给定一个样式,三目判断,如果 定义的 activeClass 等于dxal (p标签的id) 那么就给定 active 样式 ,否则就为 空
再添加一个 类样式 :class="activeClass ==‘dxal’ ? ‘active’:’ '

css
.active {
      border: 1px solid #ffb422;
       color: #ffb422;
 }
Logo

前往低代码交流专区

更多推荐