备赛蓝桥杯之第XX届职业院校组省赛第七题Github-明星项目统计
目录
备赛蓝桥杯之第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函数来重新初始化图表，以反映最新的数据。
感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！