新手必看：用Vue.js轻松打造汽车排行榜，附源码解析！从零开始：用Element UI和Vue.js实现酷炫汽车排行榜|前端新手指南：一步步教你实现汽车销量榜的完整代码|前端开发入门汽车之家-CSDN博客

本文链接：https://blog.csdn.net/qq_22182989/article/details/142587922

b站视频演示效果：

效果图：

完整代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车之家排行榜</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .ranking-container {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            padding: 15px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .ranking-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .ranking-header h2 {
            margin: 0;
            font-size: 22px;
            color: #333;
        }

        .ranking-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .ranking-item:last-child {
            border-bottom: none;
        }

        .ranking-index {
            font-size: 20px;
            font-weight: bold;
            color: #ffb400;
        }

        .ranking-item img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 10px;
        }

        .ranking-details {
            flex-grow: 1;
            margin-left: 15px;
            text-align: left;
        }

        .ranking-details h3 {
            margin: 0;
            font-size: 16px;
            color: #333;
        }

        .ranking-details .info {
            font-size: 14px;
            color: #888;
            margin-top: 5px;
        }

        .ranking-sales {
            font-size: 20px;
            font-weight: bold;
            color: #409EFF;
        }

        .ranking-button {
            margin-left: 10px;
        }

        .tabs-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
            font-size: 14px;
            border-bottom: 1px solid #ddd;
        }

        .tabs-container div {
            padding: 5px 0;
            cursor: pointer;
            color: #888;
        }

        .tabs-container .active {
            font-weight: bold;
            color: #333;
            border-bottom: 2px solid #409EFF;
        }

        .filters {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 14px;
        }

        .filters span {
            color: #888;
            cursor: pointer;
        }

        .filters .filter-active {
            color: #333;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="ranking-container">
        <div class="ranking-header">
            <h2>汽车之家排行榜</h2>
            <el-select v-model="selectedMonth" placeholder="选择月份" size="mini">
                <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>

        <div class="tabs-container">
            <div :class="{ active: activeTab === '销量榜' }" @click="changeTab('销量榜')">销量榜</div>
            <div :class="{ active: activeTab === '新能源榜' }" @click="changeTab('新能源榜')">新能源榜</div>
            <div :class="{ active: activeTab === '保值榜' }" @click="changeTab('保值榜')">保值榜</div>
            <div :class="{ active: activeTab === '关注榜' }" @click="changeTab('关注榜')">关注榜</div>
            <div :class="{ active: activeTab === '降价榜' }" @click="changeTab('降价榜')">降价榜</div>
        </div>

        <div class="filters">
            <span :class="{ 'filter-active': filter === '轿车' }" @click="setFilter('轿车')">轿车</span>
            <span :class="{ 'filter-active': filter === 'SUV' }" @click="setFilter('SUV')">SUV</span>
            <span :class="{ 'filter-active': filter === 'MPV' }" @click="setFilter('MPV')">MPV</span>
            <span :class="{ 'filter-active': filter === '微面' }" @click="setFilter('微面')">微面</span>
        </div>

        <div v-for="(car, index) in filteredCars" :key="car.id" class="ranking-item">
            <div class="ranking-index">{{ index + 1 }}</div>
            <img :src="car.image" alt="Car Image">
            <div class="ranking-details">
                <h3>{{ car.name }}</h3>
                <div class="info">
                    评分: {{ car.rating }}分 | {{ car.price }}
                </div>
            </div>
            <div class="ranking-sales">{{ car.sales }}</div>
            <el-button class="ranking-button" type="primary" size="small" @click="viewDetails(car)">查看成交价</el-button>
        </div>
    </div>
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            selectedMonth: '2023年12月',
            activeTab: '销量榜',
            filter: '轿车',
            months: [
                { label: '2023年12月', value: '2023年12月' },
                { label: '2023年11月', value: '2023年11月' },
                { label: '2023年10月', value: '2023年10月' },
            ],
            cars: [
                { id: 1, name: 'Model Y', rating: 4.36, price: '25.89-36.39万', sales: 60055, image: 'https://via.placeholder.com/80x60', category: '新能源' },
                { id: 2, name: '宋 PLUS 新能源', rating: 4.50, price: '15.48-21.99万', sales: 44370, image: 'https://via.placeholder.com/80x60', category: '新能源' },
                { id: 3, name: '秦 PLUS', rating: 4.44, price: '9.98-17.98万', sales: 41142, image: 'https://via.placeholder.com/80x60', category: '轿车' },
                { id: 4, name: '海鸥', rating: 4.49, price: '7.38-8.98万', sales: 41012, image: 'https://via.placeholder.com/80x60', category: '轿车' },
                { id: 5, name: '元 PLUS', rating: 4.51, price: '13.58-16.78万', sales: 30799, image: 'https://via.placeholder.com/80x60', category: 'SUV' },
                { id: 6, name: '宋 Pro 新能源', rating: 4.43, price: '12.98-16.58万', sales: 27812, image: 'https://via.placeholder.com/80x60', category: '新能源' },
            ]
        };
    },
    computed: {
        filteredCars() {
            return this.cars.filter(car => {
                if (this.activeTab === '销量榜') {
                    return true; // 销量榜显示所有汽车
                } else if (this.activeTab === '新能源榜') {
                    return car.category === '新能源';
                } else if (this.activeTab === '保值榜') {
                    return car.rating > 4.4; // 假设高评分是保值
                } else if (this.activeTab === '关注榜') {
                    return car.sales > 30000; // 假设高销量是关注
                } else if (this.activeTab === '降价榜') {
                    return false; // 示例中无降价榜数据
                }
                return false;
            });
        }
    },
    methods: {
        setFilter(filter) {
            this.filter = filter;
        },
        changeTab(tab) {
            this.activeTab = tab;
        },
        viewDetails(car) {
            this.$message(`查看 ${car.name} 的成交价`);
        }
    }
});

</script>

</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！

本人承接网网站开发，如有需要，欢迎私信咨询！

如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~

给新手学习前端开发的建议：

了解基础知识：
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
- 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。
实践项目：
- 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。
学习工具和框架：
- 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
- 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。
关注前端趋势：
- 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
- 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。
培养解决问题的能力：
- 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
- 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。
不断学习和提升：
- 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。
注重代码质量和可维护性：
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性，尽量编写可复用和可扩展的代码。
参与社区和交流：
- 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。