应该是怎样的

最新推荐文章于 2024-08-21 08:59:35 发布

hamimelon2020

最新推荐文章于 2024-08-21 08:59:35 发布

阅读量278

点赞数

分类专栏： vue JavaScript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123827642

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<template>
    <div class="news-navigater">
        <n-tabs type="line">
            <n-tab-pane 
            v-for="name in names" :key="name.id">{ tab }
            </n-tab-pane>
        </n-tabs>
    </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { NTabPane } from 'naive-ui';
import { NTabs } from 'naive-ui';
import { CategoryService } from "../category-service";
import { Category } from "@/category"

@Options({
    components: {
        NTabPane,
        NTabs,
    },
})

export default class NewsNavigater extends Vue {
    private categoryService: CategoryService = new CategoryService();
    private categories: Category[] = this.categoryService.getCategoryData();
}

//            <n-tab-pane name="top" tab="头条"></n-tab-pane>
//            <n-tab-pane name="guonei" tab="国内"></n-tab-pane>
//            <n-tab-pane name="guoji" tab="国际"></n-tab-pane>
//            <n-tab-pane name="yule" tab="娱乐"></n-tab-pane>
//            <n-tab-pane name="tiyu" tab="体育"></n-tab-pane>
//            <n-tab-pane name="junshi" tab="军事"></n-tab-pane>
//            <n-tab-pane name="caijing" tab="财经"></n-tab-pane>
//            <n-tab-pane name="shishang" tab="时尚"></n-tab-pane>
//            <n-tab-pane name="youxi" tab="游戏"></n-tab-pane>
//            <n-tab-pane name="qiche" tab="汽车"></n-tab-pane>
//            <n-tab-pane name="jiankang" tab="健康"></n-tab-pane>
</script>