<div ref="show">
<div v-for="(item,index) in list" :key="item.id">
<ul>
<li class="show-item" @click="clickItem($event,item,index)">item.label</li>
</ul>
</div>
</div>

clickItem(e,item,index){
const showItem = this.$refs.show //此处获得一个类数组对象
<!-- //console.log(showItem) -->
<!-- <div ref="show">-->
<!-- <div v-for="(item,index) in list" :key="item.id">-->
<!-- <ul>-->
<!-- <li class="show-item">aaa</li>-->
<!-- <li class="show-item">bbb</li>-->
<!-- </ul>-->
<!-- </div>-->
<!--</div>-->

<!--从第二次开始 要把上一次的样式删掉,获取到已经被添加了新样式的元素-->
const oList=[...showItem.getElementsByClassName（'show-item-click'）]

<!--移除-->
oList.forEach(item => {
item.classList.remove('show-item-click')
})
<!--使用e.target 去对对象元素进行操作-->
e.target.parentNode.parentNode.classList.add('img-click-select')
}

 

一般改变元素内容有三步
1.获取元素
2.注册事件
3.改变元素内容