vue-面试题一排柱状图按照大小排序，可以通过按钮控制大小排序

最新推荐文章于 2024-05-05 21:51:46 发布

韩江宇

最新推荐文章于 2024-05-05 21:51:46 发布

阅读量491

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_39305942/article/details/117924410

版权

本文介绍了一个Vue面试题，涉及如何实现一排柱状图根据大小排序，并通过按钮控制升序或降序排列。主要知识点包括v-for遍历、数组sort方法和三元表达式的应用。

摘要由CSDN通过智能技术生成

题目：

一排柱状图按照大小排序，可以通过按钮控制大小排序

知识点：
vue v-for sort（）排序 vue 三元表达式

实现方法：

使用v-for遍历数组，嵌套遍历一行比一行的柱子多。
使用sort（）方法，实现从小到大/从大到小排序
通过三元表达式来切换排序状态

<template>
  <div class="panle">
    <p>一排柱状图按照大小排序，可以通过按钮控制大小排序</p>
    <div class="container">
      <div class="warp" v-for="(item,index) in list" :key='index'>
        <div v-for="(cItem,cIdex) in item" :key="cIdex">
          <div class="item" v-for="(tIm,tIde) in cItem" :key="tIde"></div>
        </div>
      </div>
    <