Vue点击事件给标签动态添加删除style样式

一切都在代码里
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;
 }