商品筛选多重筛选过滤

最新推荐文章于 2024-12-23 14:12:05 发布

郁郁青枝

最新推荐文章于 2024-12-23 14:12:05 发布

阅读量369

点赞数

文章标签： vue.js css javascript

本文链接：https://blog.youkuaiyun.com/wzsrlndm/article/details/120678120

版权

本文介绍如何利用Vue.js结合CSS和JavaScript实现商品页面的多重筛选和过滤功能，通过代码示例展示具体实现步骤，并附带详细注释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

代码部分(附注释)

<template>
  <div class="recipe">
    <!-- v-model="activeName" -->
    <!-- 菜谱分类 start -->
    <el-tabs type="border-card" v-model="classifyName">
      <el-tab-pane
        v-for="item in classify"
        :key="item.parent_type"
        :label="item.parent_name"
        :name="item.parent_type"
      >
        <div class="recipe-link">
          <router-link
            :to="{ query: { ...$route.query, classify: option.type } }"
            v-for="option in item.list"
            :key="option.type"
            :class="{ active: classifyType === option.type }"
          >
            {
  { option.name }}
          </router-link>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 菜谱分类 end -->
    <h2>家常好味道，给你家一般的温暖</h2>
    <!-- 容器 -->
    <!-- 左侧列表 -->
    <!-- 右侧显示 -->
    <!-- 容器 -->
    <el-container>
      <el-aside width="220px" class="rec