Vue分类筛选器

最新推荐文章于 2024-06-02 15:25:55 发布

原创

最新推荐文章于 2024-06-02 15:25:55 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

本文介绍了如何使用Vue.js创建一个功能完善的分类选择器，适用于数据筛选和操作。详细步骤和代码示例帮助读者理解实现过程。

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

以下就是小编用Vue写出来的分类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue分类筛选器</title>
		<script src="js/vue-2.6.9.min.js"></script>
		<style type="text/css">
			.subjectItem{
				margin-right: 20px;
				cursor: pointer;
			}
			.bold{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>分类选择器</h2>
			<p>
				主题分类:
				<template v-for="(item,index) in subject">
					<span 
						class="subjectItem" 
						@click="subjectClick(item.tag)" 
						:class="{bold:currentTag==item.tag}">
						{
  
  {item.name}}
					</span>
				</template>
			</p>
			<p>
				主题细节:
				<template v-for="(item,index) in datail">
					<span 
						class="subjectItem" 
						v-show="currentTag==item.tag || currentTag=='all'" 
						:class="{bold:currentName==item.name}"
						@click="detailClick(item.name)"&g