效果图
教程目录
1. 项目概述
本教程将带你使用 Vue 从头开始构建一个具有切换选项卡和筛选功能的意向列表页面。通过这个项目，你将学习到 Vue 的基本操作，如动态渲染、数据绑定、条件渲染和事件处理。
2. 项目准备
在开始之前，请确保你已经安装了 Vue 的基本环境。你可以直接使用以下模板代码，所有代码将写在一个 HTML 文件中。
<!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>
/* 在这里编写页面样式 */
</style>
</head>
<body>
<div id="app">
<!-- 页面结构会在下一部分添加 -->
</div>
<script>
new Vue({
el: '#app',
data: {
// 在这里定义 Vue 数据
}
});
</script>
</body>
</html>
3. 搭建页面结构
首先，我们需要创建一个页面结构，包括标题栏、选项卡和意向列表项。以下是代码示例：
<div class="header">
<span>意向列表</span>
<button class="button" @click="filterItems">筛选</button>
</div>
<div class="tabs">
<div
class="tab"
:class="{active: activeTab === tab}"
v-for="tab in tabs"
:key="tab"
@click="activeTab = tab"
>
{
{ tab }}
</div>
</div>
<div class="item" v-for="intent in filteredIntents" :key="intent.id">
<div class="item-title">{
{ intent.company }}</div>
<div class="item-id">{
{ intent.id }}</div>
<div class="item-amount">设备总额: {
{ intent.amount }}</div>
<div class="tags">
<span v-for="tag in intent.tags" :key="tag" class="tag">{
{ tag }}</span>
</div>
<div class="date">{
{ intent.date }}</div>
<div class="contact">{
{ intent.contact }}</div>
<button class="button">分配</button>
<button class="button follow">跟踪进展</button>
</div>
4. 添加选项卡切换功能
在 data 中添加选项卡和当前激活的选项卡数据，同时使用动态样式和点击事件来实现选项卡切换。
data: {
activeTab: '待分配',
tabs: ['待分配', '跟踪意向', '确定意向', '分期调查'],
intents: [
// 这里填入意向项数据
]
},
computed: {
filteredIntents() {
return this.intents.filter(intent => {
if (this.activeTab === '待分配') return true;
if (this.activeTab === '跟踪意向') return intent.tags.includes('跟踪进展');
if (this.activeTab === '确定意向') return intent.tags.includes('确定意向');
if (this.activeTab === '分期调查') return intent.tags.includes('分期调查');
return true;
});
}
}
5. 实现意向列表项
添加意向项的示例数据，配置不同标签，并动态展示公司名称、设备总额、日期和联系人等信息。
data: {
intents: [
{
id: '91110302MA01WAX26T',
company: '北京童心校车运营管理有限公司',
amount: '500,000.00元',
tags: ['融资客户', '意向设备', '金融方案', '担保措施', '审批材料'],
date: '2023-02-13 11:21:10',
contact: '联系人：张三'
},
// 添加更多意向项
]
}
6. 实现筛选功能
筛选功能可以简单地使用弹框来提示。这里我们用一个占位符，后续可以扩展为实际筛选功能。
methods: {
filterItems() {
alert('筛选功能尚未实现');
}
}
7. 完善样式和细节
调整页面样式，使得界面更加友好。这里使用蓝色系为主色调，同时为标签分配不同颜色，提升视觉效果。
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: #007aff;
color: #fff;
font-size: 18px;
}
.tabs {
display: flex;
background-color: #e9f2fd;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.tab.active {
color: #007aff;
font-weight: bold;
border-bottom: 2px solid #007aff;
}
.tag:nth-child(1) {
background-color: #4caf50; } /* 绿色 */
.tag:nth-child(2) {
background-color: #ff9800; } /* 橙色 */
.tag:nth-child(3) {
background-color: #ff5722; } /* 红色 */
.tag:nth-child(4) {
background-color: #03a9f4; } /* 浅蓝 */
.tag:nth-child(5) {
background-color: #9c27b0; } /* 紫色 */
8. 总结
通过本教程，你已经学会了如何使用 Vue 构建一个带有切换选项卡、动态渲染意向列表的页面。你掌握了 Vue 中的数据绑定、条件渲染、事件处理等基本技能。后续你可以扩展筛选功能，进一步增强项目的实用性。
希望这个教程能帮助你快速上手 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: 0;
}
#app {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: #007aff;
color: #fff;
font-size: 18px;
}
.tabs {
display: flex;
background-color: #e9f2fd;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
color: #333;
cursor: pointer;
font-size: 14px;
}
.tab.active {
color: #007aff;
font-weight: bold;
border-bottom: 2px solid #007aff;
}
.item {
background-color: #f1f8ff;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.item-title {
font-size: 16px;
font-weight: bold;
color: #333;
}
.item-id, .item-amount {
font-size: 14px;
color: #555;
margin: 5px 0;
}
.item-amount {
color: #007aff;
}
.tags {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.tag {
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
margin-right: 5px;
margin-bottom: 5px;
color: #fff;
}
.tag:nth-child(1) {
background-color: #4caf50; } /* 绿色 */
.tag:nth-child(2) {
background-color: #ff9800; } /* 橙色 */
.tag:nth-child(3) {
background-color: #ff5722; } /* 红色 */
.tag:nth-child(4) {
background-color: #03a9f4; } /* 浅蓝 */
.tag:nth-child(5) {
background-color: #9c27b0; } /* 紫色 */
.button {
background-color: #007aff;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
margin-right: 10px;
}
.button.follow {
background-color: #4caf50;
}
.date, .contact {
font-size: 12px;
color: #999;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<span>意向列表</span>
<button class="button" @click="filterItems">筛选</button>
</div>
<!-- Tabs -->
<div class="tabs">
<div
class="tab"
:class="{active: activeTab === tab}"
v-for="tab in tabs"
:key="tab"
@click="activeTab = tab"
>
{
{ tab }}
</div>
</div>
<!-- List of Intentions -->
<div class="item" v-for="intent in filteredIntents" :key="intent.id">
<div class="item-title">{
{ intent.company }}</div>
<div class="item-id">{
{ intent.id }}</div>
<div class="item-amount">设备总额: {
{ intent.amount }}</div>
<div class="tags">
<span v-for="tag in intent.tags" :key="tag" class="tag">{
{ tag }}</span>
</div>
<div class="date">{
{ intent.date }}</div>
<div class="contact">{
{ intent.contact }}</div>
<button class="button">分配</button>
<button class="button follow">跟踪进展</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeTab: '待分配',
tabs: ['待分配', '跟踪意向', '确定意向', '分期调查'],
intents: [
{
id: '91110302MA01WAX26T',
company: '北京童心校车运营管理有限公司',
amount: '500,000.00元',
tags: ['融资客户', '意向设备', '金融方案', '担保措施', '审批材料'],
date: '2023-02-13 11:21:10',
contact: '联系人：张三'
},
{
id: '340104199211041014',
company: '陆宇彤',
amount: '250,000.00元',
tags: ['融资客户', '担保措施', '审批材料'],
date: '2023-02-10 08:57:30',
contact: '联系人：陆宇彤'
},
{
id: '91441900MA4UWKLR58',
company: '东莞市育才校车服务有限公司',
amount: '1,382,000.00元',
tags: ['融资客户', '意向设备', '金融方案', '担保措施'],
date: '2022-12-02 17:21:47',
contact: '联系人：李四'
},
{
id: '422826198002045514',
company: '黄学霖',
amount: '563,000.00元',
tags: ['融资客户', '意向设备', '担保措施', '审批材料'],
date: '2022-11-24 08:56:23',
contact: '联系人：赵博文'
}
]
},
computed: {
filteredIntents() {
return this.intents.filter(intent => {
if (this.activeTab === '待分配') return true;
if (this.activeTab === '跟踪意向') return intent.tags.includes('跟踪进展');
if (this.activeTab === '确定意向') return intent.tags.includes('确定意向');
if (this.activeTab === '分期调查') return intent.tags.includes('分期调查');
return true;
});
}
},
methods: {
filterItems() {
alert('筛选功能尚未实现');
}
}
});
</script>
</body>
</html>