Vue点击事件给标签动态添加删除style样式
一切都在代码里ps:说明一下,因为我这里没有使用v-for 标签 ,循环,所以没有index值,这里使用标签的id 值,代替 index准备工作html<div class="up1"><pid="dxal" v-on:click="addStyleOrGetDate($event)" :class="activeClass =='dxal' ? 'active':''">
·
一切都在代码里
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;
}
更多推荐
已为社区贡献2条内容
所有评论(0)