Vue events get the event object, get the event source, get the current element, dynamically add styles

     1. js的事件，如点击事件，可以直接用this获取事件对象，
     2. 而jQuery可以使用$(this)来获取事件对象。
     3. vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象

v-on:click="onClick( $event)"

onClick(e){
    
    

$(e.currentTarget)

console.log(e)

# 获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
# 获得点击元素的第一个子元素
e.currentTarget.firstElementChild
# 获得点击元素的下一个元素
e.currentTarget.nextElementSibling
# 获得点击元素中id为string的元素
e.currentTarget.getElementById("string")
# 获得点击元素的string属性
e.currentTarget.getAttributeNode('string')
# 获得点击元素的父级元素
e.currentTarget.parentElement
# 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
}

Actual application

There will be a style change when the mouse is moved in

//模板
<template>
<div class="nav_bar">
                  <span
                    @mouseover="mouseOver($event)"
                    @mouseleave="mouseLeave($event)"
                    v-for="(item, i) in navigationBar"
                    :key="i"
                    >{
    
    {
    
     item }}</span
                  >
                  <!--  :class="active == true ? 'spanItem' : ''" -->
                </div>
  </template>
//逻辑
data() {
    
    
    return {
    
    
      navigationBar: [
        "综合能力",
        "软件能力",
        "业务能力",
        "技能能力",
        "文化能力",
        "爱好能力",
      ],
    };
  },
 methods: {
    
    
    mouseOver(e) {
    
    

      console.log("e", e.currentTarget);
      console.log("e", e.target);

      console.log("e", e.currentTarget.innerHTML);
      e.currentTarget.className = "spanItem";
    },
    mouseLeave(e) {
    
    
      e.currentTarget.className = "";
    },
  },
//样式
.spanItem {
    
    
            width: 16.666%;
            height: 34px;
            text-align: center;
            line-height: 34px;
            margin-top: -3px;
            background: linear-gradient(-26deg, #56b1ff, #48fffd);
            border-radius: 20px;
            font-size: 20px;
            font-family: AliHYAiHei;
            font-weight: 400;
            font-style: italic;
            color: #ffffff;
            text-shadow: 0px 1px 3px rgba(9, 26, 41, 0.32);
          }

What's printed in the code