vue分类

先看效果
在这里插入图片描述
再看代码

      <category-tab v-model="params.area" name="地区" :list="areaList" />
      <category-tab v-model="params.type" name="类型" :list="typeList" />
      <category-tab v-model="params.order" name="排序" :list="orderList" />
<template>
  <div class="flex items-center">
    <span> {{ name }}</span>
    <div class="w-3/5">
      <div class="flex">
        <div
          v-for="(item, index) in list"
          :key="index"
          style="flex: 0.1666;"
          class="flex relative justify-center  items-center text-center cursor-pointer"
          @click="handleClick(item, index)"
        >
          <n-tag
            round checkable
            :checked="index === activeIndex" 
          >
            {{ item }}
          </n-tag>
          <div v-if="index !== list.length - 1" class="after-border" />
        </div>
      </div>
    </div>
  </div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/719164.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Semantic Kernel 中的流式输出SSE与Vue3前端接收示例

本文将介绍如何在使用 Semantic Kernel 框架的 ASP.NET 项目中使用流式输出 SSE&#xff08;Server-Sent Events&#xff09;&#xff0c;并展示如何在Vue3前端应用中接收这些数据。并介绍了如何使用 microsoft/fetch-event-source 库使用 POST 方法来接收 SSE 数据。 1. 背景 …

【单片机毕业设计选题24013】-基于STM32的城市垃圾分类引导系统

系统功能: 1、系统具有语音识别功能&#xff0c;可以对厨余垃圾、其他垃圾、有害垃圾、可回收垃圾进行语音识别&#xff1b; 2、系统可根据语音识别结果直接开启对应类别的垃圾桶&#xff0c;引导分类投放&#xff1b; 3、系统具有语音播报功能&#xff0c;可以语音播报出识…

Dapr分布式应用运行时初探2

Dapr是一个很优秀的分布式应用运行时&#xff0c;在本篇里我们来说一下Dapr的几个特色功能。 为了方便介绍&#xff0c;我简单画了个思维导图&#xff0c;如下所示&#xff1a; 众所周知&#xff0c;新技术的产生是为了解决现存的问题。从上面的思维图中我们可以了解下Dapr这…

【x264】滤波模块的简单分析

【x264】滤波模块的简单分析 1. 滤波模块概述1.1 自适应边界1.2 自适应样点级滤波器1.3 滤波过程 2. 函数入口&#xff08;fdec_filter_row&#xff09;2.1 去块滤波&#xff08;x264_frame_deblock_row&#xff09;2.1.1 强滤波函数&#xff08;deblock_edge_intra&#xff09…

FPGA - 滤波器 - IIR滤波器设计

一&#xff0c;IIR滤波器 在FPGA - 滤波器 - FIR滤波器设计中可知&#xff0c;数字滤波器是一个时域离散系统。任何一个时域离散系统都可以用一个N阶差分方程来表示&#xff0c;即&#xff1a; 式中&#xff0c;x(n)和y(n)分别是系统的输入序列和输出序列&#xff1b;aj和bi均为…

vue简介实例

先看样式 再看代码 <div v-else class"relative mt-4 h-44 cursor-pointer overflow-hidden rounded-xl"><divclass"absolute flex h-44 w-full blur-lg":style"{ backgroundImage: url(${currentSongList.list[0]?.coverImgUrl}) }"…

jpg压缩在线方法,我只用这2种(无损)

在数字化的时代&#xff0c;我们经常需要分享、存储或上传各种图像文件&#xff0c;而JPG是其中最常见的图像格式之一。然而&#xff0c;大文件大小有时可能成为一个问题&#xff0c;尤其是在网络传输或存储空间有限的情况下。为了解决这一问题&#xff0c;我们可以利用在线工具…

滚球游戏笔记

1、准备工作 (1) 创建地面&#xff1a;3D Object-Plane&#xff0c;命名为Ground (2) 创建小球&#xff1a;3D Object-sphere&#xff0c;命名为Player&#xff0c;PositionY 0.5。添加Rigidbody组件 (3) 创建文件夹&#xff1a;Create-Foder&#xff0c;分别命名为Material…

Ps:条件模式更改

Ps菜单&#xff1a;文件/自动/条件模式更改 Automate/Conditional Mode Change 条件模式更改 Conditional Mode Change脚本命令可用于将图像文档的颜色模式更改为指定的模式。 既可以将指定的源颜色模式转换为目标颜色模式&#xff0c;还可以将此命令记录在动作中以便实施快速转…

单通道触摸感应开关RH6016

1.简介 SOT23-6 RH6016 封装和丝印 RH6016 是一款内置稳压模块的单通道电容式触摸感应控制开关IC&#xff0c;可以替代传统的机械式开关。 RH6016可在有介质(如玻璃、亚克力、塑料、陶瓷等)隔离保护的情况下实现触摸功能&#xff0c;安全性高。 RH6016内置高精度稳压、上电复…

Apache Doris 全新分区策略 Auto Partition 应用场景与功能详解 | Deep Dive系列

编辑&#xff1a;SelectDB 技术团队 在当今数据驱动的时代&#xff0c;如何高效、有序地管理数据库中的海量数据成为挑战。为了处理庞大的数据集&#xff0c;分布式数据库引入了类似分区和分桶策略&#xff0c;通过将数据按特定规则划分成较小的单位并分布到不同节点上&#x…

远程桌面控制

收费程序&#xff0c;白嫖党勿扰 收费金额1000元 1 概述 之前做了一个云渲染程序&#xff0c;和虚幻的像素流原理是一样的&#xff0c;不过没有虚幻做的那么完善。云渲染是使用视频流技术&#xff0c;将三维可视化画面以视频流的形式推送到服务器&#xff0c;服务器将视频转发…

28. 空间滤波器

导论&#xff1a; 几何光线追迹是光线传播的一种不完善描述。严格地说&#xff0c;光束传播是一个相干过程。当波前通过自由空间或光学介质时&#xff0c;波前会发生相干干涉。这种相干传播的建模包括物理光学领域。 物理光学传播&#xff08;POP&#xff09;是zemax的一项强…

2024年【高压电工】模拟考试题及高压电工考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年高压电工模拟考试题为正在备考高压电工操作证的学员准备的理论考试专题&#xff0c;每个月更新的高压电工考试试题祝您顺利通过高压电工考试。 1、【单选题】下列()安全用具是在电气操作中使用的基本安全用具。…

服务器数据恢复—KVM虚拟机被误删除如何恢复虚拟磁盘文件?

服务器数据恢复环境&故障&#xff1a; 1台服务器&#xff0c;Linux操作系统EXT4文件系统&#xff0c;部署了数台KVM虚拟机&#xff0c;每台虚拟机包含一个qcow2格式的磁盘文件&#xff0c;和一个raw格式的磁盘文件。 工作人员操作失误删除了3台服务器上的KVM虚拟机&#xf…

c# 二维图形绘制实践

1.等边三角形 1.1 概述 1.2 代码 using System; using System.Drawing; using System.Windows.Forms;public partial class TriangleForm : Form {public TriangleForm(){//InitializeComponent();// 确保窗体大小足够大&#xff0c;以容纳三角形 this.ClientSize new Siz…

springboot相关的一些知识

SpringBoot可以同时处理多少请求 SpringBoot默认的内嵌容器是Tomcat&#xff0c;所以SpringBoot可以同时处理多少请求取决于Tomcat。 SpringBoot中处理请求数量相关的参数有四个&#xff1a; server.tomcat.thread.min-spare&#xff1a;最少的工作线程数&#xff0c;默认大小…

表单中的常用元素

10.图像形式上传文件 <input type“image”>定义图像形式的提交。 src 属性和alt属性必须与<input type“image””>结合使用。 input type"image"src"img/l.jpg"alt"submit"/> 11.下拉列表框 <select>标签定义下拉列表框…

ubuntu 20.04禁止自动更新内核驱动、显卡驱动(使用命令行)

本文目录 一、禁止更新内核1.1 查看当前内核1.2 查看安装的内核1.3 根据需求&#xff0c;使用hold参数禁止固定内核1.4 查询被锁定不更新软件包的状态 二、禁止更新显卡驱动2.1 查看安装的显卡驱动2.2 查看详细的详细的显卡信息2.3 禁止显卡驱动更新2.4 查询显卡是否设置成功 前…

EE trade:现货黄金杠杆比例的计算方法

现货黄金杠杆交易是一种利用保证金进行交易的方式&#xff0c;允许投资者用较少的资金控制较大的交易量&#xff0c;从而放大收益或损失。杠杆比例的计算方法相对简单&#xff0c;主要取决于交易所需的保证金和实际交易金额之间的关系。 杠杆比例的计算公式 杠杆比例 实际交…