vue-cli选项卡案例

本节通过选项卡案例，巩固 .vue 文件的创建、路由匹配规则创建的相关知识。

在 components 文件夹下新建 tab.vue，代码如下。

<template>
  <div>
    <div class="menu">
 // 1．标题排他（单击的菜单高亮显示）
 // 2．绑定菜单单击事件，传递参数
      <ul>
        <li :class="{active:isactive==0}" @click="mytab(0)">娱乐新闻</li>
        <li :class="{active:isactive==1}" @click="mytab(1)">体育新闻</li>
        <li :class="{active:isactive==2}" @click="mytab(2)">热搜</li>
      </ul>
    </div>
    <div class="main">
      <ul>
         // 4．使用v-for遍历数组，数组下标就是用户传递的isactive的值
        <li v-for="(item,i) in newlist[isactive]" :key="i">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isactive: 0,
      newlist: [
        ["娱乐新闻1", "娱乐新闻2", "娱乐新闻3"],
        ["体育新闻1", "体育新闻2", "体育新闻3"],
        ["热搜新闻1", "热搜新闻2", "热搜新闻3"]
      ]
    };
  },
  methods: {
    //3．接收参数，重新赋值给isactive
    mytab(i) {
      this.isactive = i;
    }
  }
};
</script>

<style scoped>
.active{
  color: red;
}
</style>

代码解析如下。

选项卡案例分为 4 个步骤。

  1. 标题排他功能，单击的菜单需要高亮显示，使用样式绑定实现。

  2. 绑定菜单单击事件，进行参数传递。

  3. 在方法中根据接收的参数，给 isactive 重新赋值。

  4. 使用 v-for 遍历数据，最终实现选项卡功能。

最后，需要创建匹配规则，把 tab.vue 在浏览器中显示出来，进入 router 下的 index.js 文件，代码如下。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 1. 引入 tab 组件
import tab from '@/components/tab'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 2. 创建路由匹配规则
    {
      path: '/tab',
      name: 'tab',
      component: tab
    }
  ]
})

代码解析如下。

  • 引入 tab 组件。

  • 创建匹配规则，当路径为 /tab 时，页面显示 tab.vue 文件。