JS 数据排序展示

简介: JS 数据排序展示
需求:
有三个选择框,用于排序展示数据,按照用户点击的顺序依次展示数据
例:用户点击 变量1——>变量3——>变量2,数据按顺序展示 数据1——>数据3——>数据2;
用户点击 变量3——>变量1,数据按顺序展示 数据3——>数据1

解决

使用 for 循环结合 switch 解决

<template>
  <div class="container">
    变量展示:
    <a-checkbox-group v-model="numList" @change="clickVarible">
      <a-checkbox v-for="(item, index) in VaribleList" :key="item.value" :value="index + 1">
        {{ item.label }}
      </a-checkbox>
    </a-checkbox-group>
    <a-button type="primary" @click="listSort">提交</a-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// 列表绑定
const numList = ref([]);
// 变量列表
const VaribleList = ref<object[]>([
  { label: '变量1', value: 1 },
  { label: '变量2', value: 2 },
  { label: '变量3', value: 3 }
])
// 数据集合
const dataList = ref<object[]>([]);
function listSort() {
  dataList.value.length = 0;//置空
  for (let index = 0; index < numList.value.length; index++) {
    switch (numList?.value[index]) {
      case 1:
        dataList.value.push({
          name: '变量1',
          data: ['v1', 'v1']
        })
        break;
      case 2:
        dataList.value.push({
          name: '变量2',
          data: ['v2', 'v2']
        })
        break;
      case 3:
        dataList.value.push({
          name: '变量3',
          data: ['v3', 'v3']
        })
        break;
      default:
        break;
    }
  }
  console.log(dataList.value);
}
/* BEGIN 可以不用
// 变量重置列表
const resetList = () => {
  return ['未选择', '未选择', '未选择']
}
// 变量存储列表
const resultList = ref(resetList())
function clickVarible(data: any) {
  resultList.value = resetList()
  if (numList.value?.length) {
    numList.value.forEach((ele, idx) => {
      resultList.value[ele - 1] = idx + 1
    })
  }
}
 */
</script>
<style lang="less" scoped>
.container {
  width: 600px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  text-align: center;
}
</style>
目录
打赏
0
0
0
0
33
分享
相关文章
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
138 59
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
132 0
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
184 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
85 4
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
155 11

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等