vue中使用原生js实现tab栏切换

1. 准备工作

这里id很重要,用来区别用户点击了那个容器,然后使用$event接受id的数据

<div id="users" class="aside-title" @click="handleTab($event)">
 	用户
 </div>
 <div id="devices" class="aside-title" @click="handleTab($event)">
    设备
 </div>

2. data中定义active变量

data() {
    return {
      search: '',
      active: 'users',
      page: 1,
      total: 0
    }
  },

3. 书写对应事件函数

  methods: {
    handleTab(e) {
      if (e.currentTarget.id === 'users') {
        this.active = 'users'
      } else {
        this.active = 'devices'
      }
    }
  }