vue----项目案例(类别)

ElementUI 官网

标签页 表示类别

点击每个标签，则加载对应类别下的新闻数据，并展示

<el-tabs v-model="activeName" @tab-click="tabClick" type="card">
      <el-tab-pane label="新闻1" name="f1">
        <LaufItem v-for="i in dataList" :data="i" :key="i.id" />
      </el-tab-pane>
      <el-tab-pane label="新闻2" name="f2">
        <LaufItem v-for="i in dataList" :data="i" :key="i.id" />
      </el-tab-pane>
</el-tabs>

//后端模型类
// 类别表、 新闻表

//事件函数
tabClick(com, a){
      // com 为点击的组件对象
      console.log("点击了", com.$props)
      if(com.$props.name == "f1"){
        console.log("加载类别:", "f1")
      }else{
        console.log("加载其他类别:")
      }
    },

应用案例

1. 后端实现：
   模型类

视图

2. 前端实现
   移动端需使用vue + vant 添加链接描述

影视列表 + 详情 + vip

参考优酷视频