vue实现小菜单的动态切换

需要实现的目标就是类似于jq的事件委托。
直接上代码：
html:

<div class="wenBottom "  v-for="(item,$index) in items" :key="item.index" @click="dianji(e,$index)">
    <p  @click="show(item)"  class="boderBottom" :class="{active:$index==ins}">{{item.style}}</p>
</div>

css:

.active {
  color: white;
  background: rgb(15, 134, 231);
}

js:

export default {
  data() {
    return {
      ins: -1,
      e: ''
    }
  },
  methods: {
    dianji(e, index) {
      console.log(index)
      this.ins = index
      var e = e || window.event
      var target = e.target || e.srcElement
    }
  }
}

实现的效果：
开始的效果：

动态点击的效果：