改变下拉框中内容显示的顺序方法

news2024/9/24 11:21:15

在官网上:

如图所示:先点击龙须面,再点击虾仔煎的时候,会在下拉框中按照用户的点击顺序显示出来。

问题:前端如何按照黄金糕-双皮奶-虾仔煎-龙须面的顺序显示点击的值呢?这样做的一个好处就是按后端的顺序返回给他,在后端处理节约一定的性能。同样,以该顺序显示在前端界面,增加用户的一个体验感!

回到自己的项目中,我希望实现一个这样的效果。如何现实?

  

 起先小编也想了很多方法,数据结构的冒泡排序都用上了,后来想到了一个非常简便的方式,只需要进行一个sort简单排序即可。

  // 获取options数组
      const options = this.tooltipBaseData.options;

      // 根据options数组的下标顺序重新排序value数组中的值
      const sortedValues = value.sort((a, b) => {
        return options.indexOf(a) - options.indexOf(b);
      });

      // 更新value数组为重新排序后的值
      this.value = sortedValues;
      console.log("valie", this.value);

 this.tooltipBaseData.options为父组件传递给子组件的值,具体则是下拉框框的选项。

 将拿到value对下拉组件进行一个v-model绑定即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/713215.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【2023】性感美少女-InsCode Stable Diffusion 美图活动一期

作者:闲散的不务正业的运维目录 一、 Stable Diffusion 模型在线使用地址:二、Stable Diffusion如何使用三、模型相关版本和参数配置:四、图片生成提示词与反向提示词:五、种子及对应图片:六、总结 一、 Stable Diffus…

Qt的发展如何?它是否是一个就业的好选择?

Qt是一种流行的跨平台应用程序开发框架,被广泛用于构建图形用户界面(GUI)和嵌入式应用程序。它具有良好的可移植性和可扩展性,并支持多种编程语言,如C、Python和JavaScript。 Qt的发展一直稳步推进,并且在…

I.MX6ULL_Linux_驱动篇(39) 阻塞和非阻塞IO

阻塞和非阻塞 IO 是 Linux 驱动开发里面很常见的两种设备访问模式,在编写驱动的时候一定要考虑到阻塞和非阻塞。本章我们就来学习一下阻塞和非阻塞 IO,以及如何在驱动程序中处理阻塞与非阻塞,如何在驱动程序使用等待队列和 poll 机制。 阻塞…

HTML5+CSS3+JS小实例:可自由拖拽排序的表格

实例:可自由拖拽排序的表格 技术栈:HTML+CSS+JS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=…

嗨爆全场!联诚发大屏与荧光棒闪耀周杰伦海口演唱会!

6月29日-7月2日&#xff0c;2023周杰伦嘉年华世界巡回演唱会海口站在海口五源河体育场震撼开唱&#xff0c;来自世界各地的数万名歌迷粉丝齐聚椰城&#xff0c;共享狂欢盛宴。联诚发LCF龙腾S系列LED透明屏和智慧荧光棒系列产品在演唱会现场大放异彩&#xff0c;陪伴粉丝朋友们一…

2023 全球数字经济大会人工智能高峰论坛,和鲸科技入选北京市人工智能行业赋能典型案例

7月&#xff0c;由国家发展改革委、工业和信息化部、科技部、国家网信办、商务部、中国科协联合北京市人民政府共同主办“2023全球数字经济大会”在京召开&#xff0c;本届活动主题为“数据驱动发展&#xff0c;智能引领未来”。其中“人工智能高峰论坛”重点围绕通用人工智能大…

Leetcode-每日一题【61.旋转链表】

题目 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3] 示例 2&#xff1a; 输入&#xff1a;head [0,1,2], k 4输出&#xff1a…

网页的动静分离设置

我们都知道nginx处理静态网页是强项,而tomcat处理动态网页是强项.我们可以发挥他们共同的优点.nginx处理静态页面而tomcat处理动态页面 进入nginx配置文件改 总结 1.改配置文件最好复制一份 2.做一步验证一步 才知道哪里出错了 3.出错了别着急先看页面在浏览器能不能打开 不…

Python 字节数组方式写入kafka(含报错return ‘<SimpleProducer batch=%s>‘ % self.async)

一、背景 项目开发了一个类似kafka tools查询工具的kafka 查询&#xff0c;现在需要测试一下如果通过字节数组的形式写入&#xff0c;看看查询有没有问题 二、kafka查询代码 Python代码示例&#xff1a; from kafka import KafkaProducer import json# 创建Kafka生产者 pro…

搭建高性能数据库集群之三:Keepalived实现MySQL集群高可用

搭建高可用集群&#xff0c;2台HAProxy 可实现Mycat多节点的集群高可用和负载均衡&#xff0c;而HAProxy 的高可用&#xff0c;由Keepalived来实现。Keepalived负责为该台服务器抢占vip(虚拟IP)&#xff0c;抢到后对该主机访问。 搭建高可用集群&#xff1a; 上图&#xff0…

开源全新H5充值系统源码/自定义首页+充值页面/灵活对接上游渠道接口

开源全新H5充值系统源码&#xff0c;系统基于thinkphp框架开发&#xff0c;功能已全完善&#xff0c;可灵活对接其他上游渠道接口&#xff0c;默认对接了大猿人接口&#xff0c;另外可无限制自定义创建充值页面&#xff0c;首页支持后台自定义修改&#xff0c;支持三级分销&…

No1.精选前端面试题,享受每天的挑战和学习

文章目录 如何实现分页功能如何实现vue虚拟列表功能浏览器的渲染原理JS中Map、WeakMap和Object的区别 如何实现分页功能 要实现分页功能&#xff0c;主要涉及以下几个方面的步骤&#xff1a; 数据源&#xff1a;首先需要有一个数据源&#xff0c;可以是数据库、文件、API接口等…

Centos7修改root密码

1.首先启动系统&#xff0c;在这个开机界面按e&#xff0c;进入编辑模式 2.进入编辑界面&#xff0c;上下光标键移动&#xff0c;找到linux16这一行&#xff0c;在末尾追加内容init/bin/sh,然后按Ctrlx键进入单用户模式。 3.在单用户模式下输入mount -o remount, rw /,挂载…

二、QT工程中各个文件代表的含义

QT从入门到实战学习笔记 基本QT工程中各个文件知识1、main函数2、.pro工程文件3、QT5基本模块4、.h头文件 基本QT工程中各个文件知识 1、main函数 #include "mymainwindow.h" #include <QApplication> //包含一个应用程序类的头文件 //main程序入口 argc命…

SSM球场计费管理系统-计算机毕设 附源码77275

SSM球场计费管理系统 摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在球馆计费管理的要求下&#xff0c;开发一款整体…

听说最近ChatGPT很火?我来整个废话版ChatGPT!

文章目录 需求分析项目初始化读取语料库文件实现随机模块生成文章保存文章命令行配置参数命令行交互废话版ChatGPT网页版 废话版ChatGPT 的功能是能根据语料库的配置和用户输入的规则&#xff0c;随机生成一篇可长可短的文本&#xff0c;里面的内容语句通顺&#xff0c;但是废话…

系列三、RocketMQ安装

一、前置准备 安装JDK&#xff0c;要是没有安装&#xff0c;请参考如下文章进行安装 https://blog.csdn.net/HelloWorld20161112/article/details/129085841 二、安装 2.1、下载RocketMQ安装包 # 官网 https://rocketmq.apache.org/download# 我分享的 链接&#xff1a;htt…

借助navicat,把一个数据库里面的部分表数据,导入另一个数据库中

背景 准备 在navicat里面创建两个数据库&#xff0c;一个是n1,另一个是n2 n1:有数据&#xff0c;需要把n1里面的部分表数据导入到n2里面 n2:被导入的数据库 给n1录入数据 给n2导入部分数据 点击工具---》 点击数据传输 选择导入和导出的数据库 点击自定义&#xff0c;选择自己…

KMeans聚类算法实现

目录 1. K-Means的工作原理 2.Kmeans损失函数 3.Kmeans优缺点 4.编写KMeans算法实现类 5.KMeans算法测试 6.结果 Kmeans是一种无监督的基于距离的聚类算法&#xff0c;其变种还有Kmeans。其中&#xff0c;sklearn中KMeans的默认使用的即为KMeans。使用sklearn相关算法API…

【数据结构与算法】Huffman编码/译码(C/C++)

实践要求 1. 问题描述 利用哈夫曼编码进行信息通讯可以大大提高信道利用率&#xff0c;缩短信息传输时间&#xff0c;降低传输成本。但是&#xff0c;这要求在发送端通过一个编码系统对待传数据预先编码&#xff1b;在接收端将传来的数据进行译码(复原)。对于双工信道(即可以…