vue实现简单的tab跳转和跳转详情页

最新推荐文章于 2024-07-19 17:31:23 发布

IT__zz

最新推荐文章于 2024-07-19 17:31:23 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/IT__zz/article/details/106670419

版权

本文通过示例代码展示了如何在Vue.js应用中实现简单的Tab切换功能以及从Tab点击跳转到详细页面的操作。

摘要由CSDN通过智能技术生成

废话不多说，直接上代码：

home页面：
<template>
  <div class="home">
    <div class="header-continer">
      <div class="header-wrapper">
          <Header v-for="(item,index) in headelist "
          :key="index"
          :item="item"
          :index="index"
          @changeindex=getindex
          :corront="corront"
           />
      </div>
    </div>
    <div class="home_sort">
       <div>综合</div>
       <div @click="onSort">价格</div>
       <div>销量</div>  
     </div>
     <div class="shop_list_container">
      <div class="shop-list-item">
         <Shoplist  v-for="(item,index) in show "
         :key="index"
         :item="item"
          />
      </div>
     </div>
  </div>
</template>

<script>
import Header from "../components/Header"
import Shoplist from "../components/Shoplist"
import Axios from "axios"
export default {
   
 components:{
   
    Header,
    Shoplist
  },
  data(){
   
    return{
   
      headelist:[],
      corront:-1,
      shoplist:[],
      show:[],
      num:0
    }
  },
  methods:{
   
    getindex(index,item){
   
      // window.console.log(item)
      if(index===-1){
   
        this.show=this.shoplist
        // this.corront=index
        // window.console.log(this.show)
      }else if(index===0){
   
        this.show=[]
        this.shoplist.forEach((ele)=>{
   
          if(ele.cid===item._id){
   
            this.show.push(ele)
          }
        })
        this.corront=index
        // window.console.log(this.show)
      }else if(index===1){
   <