备赛蓝桥杯之第XX届职业院校组省赛第七题：Github 明星项目统计

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议

由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码

本题目为：2024年十五届省赛职业院校组真题第七题：Github 明星项目统计

题目：

需要考生作答的代码段如下：

复制代码

                <!-- TODO: 待补充代码 -->
                <select name="language" id="language" @change="changeHandle" v-model="language">
                    <option value="All">All</option>
                </select>

            // 语言筛选改变时或页面数字输入框数字改变时的处理函数
            const changeHandle = () => {
                // TODO：待补充代码

                initChart();
            };

题目要求：

将可供筛选的语言列表 `languages` 在 `select` 标签下的 `option` 元素进行渲染， **`option` 的 `value` 值必须对应绑定 `languages` 数组中的值**。效果如下：

完善 `changeHandle` 函数，当用户选择语言和输入显示位次的时候都会调用此函数。当用户改变 `select` 筛选器的选项或改变展示项目的位次输入时，根据用户的**选择**和**输入的位次**重新渲染图表。注意：**重新渲染图表必须通过修改 `xData` 和 `yData` 的值进行，不要修改变量名称**。

答案：

复制代码

                <!-- TODO: 待补充代码 -->
                <select name="language" id="language" @change="changeHandle" v-model="language">
                    <option v-for="lang in languages" :value="lang" :index="lang">{{lang}}</option>
                </select>

            // 语言筛选改变时或页面数字输入框数字改变时的处理函数
            const changeHandle = () => {
                // TODO：待补充代码

                let newData = chartData.value.filter((item) => {
                    return item.language == language.value
                })
                if (language.value === 'All') newData = chartData.value;
                newData = newData.slice(pageStart.value - 1, pageEnd.value);
                xData.value = newData.map(item => item.name);
                yData.value = newData.map(item => item.stars);

                initChart();
            };

拓展学习

本题作者想说

目标1：

v-for="lang in languages"：这是一个Vue.js的循环指令，用于遍历languages数组，为数组中的每个元素生成一个<option>元素。
:value="lang"：将每个<option>元素的value属性设置为当前循环到的lang值。
:index="lang"：将每个<option>元素的index属性设置为当前循环到的lang值。注意，这里:index并不是Vue.js的标准属性，可能是自定义属性，用于在JavaScript中获取当前选项的索引。
{``{lang}}：将当前循环到的lang值显示为<option>元素的文本内容。

目标2：

实现原理

过滤数据 ：首先，通过chartData.value.filter方法，根据language.value的值来过滤chartData中的数据。如果language.value等于'All'，则不过滤，直接使用所有数据。
分页数据 ：接着，使用slice方法对过滤后的数据进行分页处理。pageStart.value - 1和pageEnd.value定义了要显示的数据范围。
更新图表数据 ：通过map方法，将分页后的数据映射到xData.value和yData.value中，分别表示图表的横轴和纵轴数据。
初始化图表 ：最后，调用initChart函数来重新初始化图表，以反映最新的数据。

感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。

长路漫漫，我们还需努力！