Vue框架鼠标经过添加类

在使用vue框架时，写js代码会习惯性用原生html里面的写法，获取dom元素，然后循环绑定事件，今天来说说vue框架的事件（dom元素的操作）

文章简介：
在vue中使用v-on来进行事件绑定，简写@，
循环使用v-for，并且一起把事件绑定了，
不用像原生js里，获取元素，再循环绑定事件，
方便了很多的同时，也会伴随许多未知的用法，
今天来讲讲怎么给鼠标经过的元素加上一个类，（加上红色边框）

主体内容：
先看代码

	<ul>
          <li
            v-for="item in previewList"
            :key="item.id"
            @mouseover="changeImg(item.imgUrl)"
          >
            <img
              :src="item.imgUrl"
              alt="iphone12"
              @mouseover="onImg($event)"
            />
         </li>
     </ul>

img里的@mouseover="onImg($event)"这个鼠标经过事件就是今天的例子
你可能想不到怎样给经过的这个img加上一个类，
解决：给方法里传入参数,将这个参数.currentTarget打印出来是什么

	console.log($event.currentTarget)

就是元素本身，所以只要给这个加上类或者改变style就可以了

	$event.currentTarget.className = 'xxx'

vue获取其他元素的方法
附件：
e.target; //是你当前点击的元素
e.currentTarget; //是你绑定事件的元素

    //获得点击元素的前一个元素
    e.currentTarget.previousElementSibling
    //类似前前一个元素
    e.currentTarget.previousElementSibling.previousElementSibling
    
    //获得点击元素的第一个子元素
    e.currentTarget.firstElementChild
    
    //获得点击元素的下一个元素
    e.currentTarget.nextElementSibling;
    //类似下下个元素
    e.currentTarget.nextElementSibling.nextElementSibling
    　　
    //获得点击元素中id为string的元素
    e.currentTarget.getElementById("string")
  　　
    //获得点击元素的string属性
    e.currentTarget.getAttributeNode('string')
     　　
    //获得点击元素的父级元素
    e.currentTarget.parentElement