vue 点击当前元素进行显示隐藏，上次点过的元素隐藏

 功能描述：当一直点击2时，切换显示隐藏， 当2展开时，在点击1时，2隐藏，1显示。

<ul id="mttUl" class="mttUl">
    <li  v-for="(item,index) in aboutData.mttImg" :key="index">
        <!-- -->                      
        <img :src="item.img" :alt="item.name"  @click="stretchFn($event,index)">
    </li>
</ul> 

<script>
export default {
    data(){
        return {
            //图片点击切换
            active:0,
            removeAc:-1,
            isStatus:false,     //判断当前是展开还是收回
            currentIndex:-1,    //获取当前下标
            switchEle:0,    //切换点击元素  
        }
    },
    methods: {
        stretchFn($event,index){
            var getEle  = document.querySelectorAll('.mttUl li');   //获取所有的li元素;

            if(this.switchEle != index){

                getEle[this.switchEle].classList.remove('active');

            }

            for(let i = 0 ; i < getEle.length; i++){

                if(getEle[index].classList.contains('active')){  //是否含有active

                    getEle[index].classList.remove('active')   //移除active

                }else{

                    getEle[index].classList.add('active');    //添加active

                    this.switchEle = index;
                }
            }
        } 
    }
}
</script>
               

补充知识点：

$event 可以获取当前点击标签信息内容 

$event.currentTarget.parentElement.getAttribute('class')       //获取当前标签父元素class

$event.currentTarget.parentElement.parentElement；  //获取当前元素父元素的父元素

$event.currentTarget.parentElement.children；      //获取当前元素父元素下的子元素

document.querySelectorAll('.mttUl li')             //获取所有的指定类名元素

getEle[index].classList.contains('active')      // 判断当前元素是否含有某个类

getEle[index].classList.remove('active')        // 当前元素移除某个类

getEle[index].classList.add('active');           //当前元素添加某个类

• e.target 获取当前点击的元素
• e.currentTarget 获取绑定事件的元素
• e.currentTarget.previousElementSibling 获取前(上)一个元素
• e.currentTarget.parentElement 获取父元素
• e.currentTarget.firstElementChild 获取第一个子元素
• e.currentTarget.nextElementSibling 获取后(下)一个元素
• e.currentTarget.getAttributeNode('class') 获得点击元素的class属性