<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.改变元素内容