vue3中如何实现通过点击不同的按钮切换不同的页面

燕哥学前端

已于 2023-10-24 17:09:58 修改

阅读量4k

点赞数 1

分类专栏：新手村前端学习文章标签： vue.js 前端 javascript 1024程序员节

于 2023-09-08 16:22:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56733569/article/details/132762539

版权

在这里插入图片描述

完成以上需求，我们可以使用vue中的component标签来实现。 component是Vue.js中一个特殊的标签，用于动态地绑定其它组件。它可以与v-bind:is指令一起使用，来决定要渲染哪个组件。下面是示例代码

<template>
  <div class="app-content">
  <!-- 这里是页面切换按钮区 -->
    <div>
      <div class="flex flex-wrap gap-10">
        <el-button class="un-active" type="primary" 
        :class="{ 'active': selectedBtn == item.id }"
         v-for="item in topBtn"
         :key="item.id" 
         @click="selectChange(item)">
         {
   {
    item.name }}