效果图
教程目录
1. 引言
在前端开发中，标签选择功能非常常见，比如兴趣标签、技能标签等。这篇教程将带你从零开始，用Vue实现一个兴趣爱好标签选择页面，用户可以在每个类别中最多选择10个标签。这是一个新手友好的项目，适合刚接触Vue的开发者。
2. 效果预览
我们将实现一个带有三个兴趣类别的页面，包括运动、音乐和食物，每个类别中包含多个标签。用户可以点击标签进行选择，当选择数量达到上限时，未选择的标签会变为不可选。
3. 环境准备
确保安装了最新版本的Vue.js。可以直接在HTML中通过CDN引入。
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
4. 代码结构
我们的代码将分为以下部分：
- HTML结构：定义标签的布局。
- CSS样式：美化界面。
- JavaScript逻辑：使用Vue控制数据和交互。
5. 实现页面布局和样式
首先，我们设置HTML和基本CSS样式。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兴趣爱好选择 - Vue 示例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f8fa;
margin: 0;
padding: 20px;
}
#app {
max-width: 600px;
margin: 0 auto;
}
.header {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.category {
margin-bottom: 20px;
}
.category-title {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
.category-title span {
font-size: 12px;
color: #999;
margin-left: 5px;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
padding: 8px 12px;
border-radius: 16px;
font-size: 14px;
cursor: pointer;
background-color: #f0f0f0;
color: #333;
transition: background-color 0.3s;
}
.tag.selected {
background-color: #007aff;
color: #fff;
}
.tag.limit-reached {
cursor: not-allowed;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div class="header">兴趣爱好</div>
<!-- 标签分类 -->
<div class="category" v-for="category in categories" :key="category.name">
<div class="category-title">
<span>{
{ category.name }}</span>
<span>({
{ category.selectedCount }}/{
{ maxSelection }})</span>
</div>
<div class="tags">
<div
v-for="tag in category.tags"
:key="tag.name"
class="tag"
:class="{ selected: tag.selected, 'limit-reached': !tag.selected && category.selectedCount >= maxSelection }"
@click="toggleTagSelection(category, tag)"
>
{
{ tag.name }}
</div>
</div>
</div>
</div>
6. 绑定数据并实现逻辑
数据定义
在Vue的 data 中定义类别、标签和最大选择数：
<script>
new Vue({
el: '#app',
data: {
maxSelection: 10,
categories: [
{
name: '运动',
tags: [
{
name: '游泳', selected: false },
{
name: '跑步', selected: false },
// 其他标签...
]
},
{
name: '音乐',
tags: [
{
name: '欧美', selected: false },
{
name: '流行', selected: false },
// 其他标签...
]
},
{
name: '食物',
tags: [
{
name: '火锅', selected: false },
{
name: '寿司', selected: false },
// 其他标签...
]
}
]
},
methods: {
toggleTagSelection(category, tag) {
const selectedCount = category.tags.filter(tag => tag.selected).length;
if (!tag.selected && selectedCount >= this.maxSelection) return;
tag.selected = !tag.selected;
}
}
});
</script>
功能实现
toggleTagSelection 方法用于切换标签的选中状态，超出最大选择数量时不可再选择。
7. 功能细节实现
1) 限制选择数量
在每次点击标签时检查已选择的数量，如果达到了最大值，未选择的标签会被禁用。
if (!tag.selected && selectedCount >= this.maxSelection) return;
2) 动态样式
通过 v-bind:class 绑定 selected 和 limit-reached 样式，实现不同状态下的标签外观。
3) 标签计数
通过计算属性或在点击事件中动态更新选择的标签数量，显示用户已选的标签数。
8. 总结
在本教程中，我们创建了一个包含多个类别的标签选择页面，用户可以在每个类别中选择多个标签，但选择数量有限。通过Vue的数据绑定和CSS样式的结合，实现了一个简单但实用的兴趣选择界面。这种方法在实际应用中很常见，例如问卷调查和用户兴趣采集等场景。
通过这个项目，你不仅学习了Vue的基本用法，还了解了如何将CSS和JavaScript结合使用，以实现动态的页面交互功能。希望这个教程能帮助你更好地理解Vue，并在实际项目中应用！
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兴趣爱好选择 - Vue 示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f8fa;
margin: 0;
padding: 20px;
}
#app {
max-width: 600px;
margin: 0 auto;
}
.header {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.category {
margin-bottom: 20px;
}
.category-title {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
.category-title span {
font-size: 12px;
color: #999;
margin-left: 5px;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
padding: 8px 12px;
border-radius: 16px;
font-size: 14px;
cursor: pointer;
background-color: #f0f0f0;
color: #333;
transition: background-color 0.3s;
}
.tag.selected {
background-color: #007aff;
color: #fff;
}
.tag.limit-reached {
cursor: not-allowed;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div class="header">兴趣爱好</div>
<div class="category" v-for="category in categories" :key="category.name">
<div class="category-title">
<span>{
{ category.name }}</span>
<span>({
{ category.selectedCount }}/{
{ maxSelection }})</span>
</div>
<div class="tags">
<div
v-for="tag in category.tags"
:key="tag.name"
class="tag"
:class="{ selected: tag.selected, 'limit-reached': !tag.selected && category.selectedCount >= maxSelection }"
@click="toggleTagSelection(category, tag)"
>
{
{ tag.name }}
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
maxSelection: 10, // 每个类别最多可以选择的标签数量
categories: [
{
name: '运动',
tags: [
{
name: '游泳', selected: false },
{
name: '跑步', selected: false },
{
name: '单车', selected: false },
{
name: '瑜伽', selected: false },
{
name: '台球', selected: false },
{
name: '滑板', selected: false },
{
name: '乒乓球', selected: false },
{
name: '羽毛球', selected: false },
{
name: '网球', selected: false },
{
name: '健身', selected: false },
{
name: '篮球', selected: false },
{
name: '足球', selected: false },
{
name: '高尔夫', selected: false },
{
name: '长跑', selected: false },
{
name: '舞蹈', selected: false },
{
name: '街舞', selected: false },
{
name: '健身房', selected: false },
{
name: '登山', selected: false },
{
name: '射箭', selected: false },
{
name: '击剑', selected: false }
]
},
{
name: '音乐',
tags: [
{
name: '欧美', selected: false },
{
name: '日韩', selected: false },
{
name: '流行', selected: false },
{
name: '爵士', selected: false },
{
name: '布鲁斯', selected: false },
{
name: '电子', selected: false },
{
name: '嘻哈', selected: false },
{
name: '华语', selected: false },
{
name: '粤语', selected: false },
{
name: '校园民谣', selected: false },
{
name: '周杰伦', selected: false },
{
name: '陈奕迅', selected: false },
{
name: '八十年代精选', selected: false },
{
name: '乡村', selected: false },
{
name: '蔡徐坤', selected: false },
{
name: '轻音乐', selected: false },
{
name: '金属', selected: false },
{
name: '王力宏', selected: false },
{
name: '五月天', selected: false },
{
name: '萧敬腾', selected: false }
]
},
{
name: '食物',
tags: [
{
name: '北京烤鸭', selected: false },
{
name: '港式早茶', selected: false },
{
name: '火锅', selected: false },
{
name: '烤串', selected: false },
{
name: '麻辣香锅', selected: false },
{
name: '麻小', selected: false },
{
name: '生煎包', selected: false },
{
name: '卤肉饭', selected: false },
{
name: '寿司', selected: false },
{
name: '日本拉面', selected: false },
{
name: '日式铁板烧', selected: false },
{
name: '石锅拌饭', selected: false },
{
name: '生鱼片', selected: false },
{
name: '泰国菜', selected: false },
{
name: '牛排', selected: false },
{
name: '意大利面', selected: false },
{
name: '薯条', selected: false },
{
name: '美式炸鸡', selected: false },
{
name: '慕斯蛋糕', selected: false },
{
name: '奶酪', selected: false }
]
}
]
},
computed: {
// 计算每个类别已选中的标签数量
categoriesWithSelectionCount() {
return this.categories.map(category => {
const selectedCount = category.tags.filter(tag => tag.selected).length;
return {
...category, selectedCount };
});
}
},
methods: {
// 切换标签的选中状态
toggleTagSelection(category, tag) {
const selectedCount = category.tags.filter(tag => tag.selected).length;
if (!tag.selected && selectedCount >= this.maxSelection) return;
tag.selected = !tag.selected;
}
},
watch: {
// 监听 categories 的变化并更新 selectedCount
categories: {
deep: true,
handler(newVal) {
this.categories.forEach(category => {
category.selectedCount = category.tags.filter(tag => tag.selected).length;
});
}
}
}
});
</script>
</body>
</html>