提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议
由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码
本题目为：2024年十五届省赛职业院校组真题第七题：Github 明星项目统计
题目：
需要考生作答的代码段如下：
<!-- TODO: 待补充代码 --><select name="language" id="language" @change="changeHandle" v-model="language"><option value="All">All</option></select> // 语言筛选改变时或页面数字输入框数字改变时的处理函数const changeHandle = () => {// TODO：待补充代码initChart();};题目要求：
1. 将可供筛选的语言列表 `languages` 在 `select` 标签下的 `option` 元素进行渲染， **`option` 的 `value` 值必须对应绑定 `languages` 数组中的值**。效果如下：
2. 完善 `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函数来重新初始化图表，以反映最新的数据。
感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！
