vue中点击添加类名,并且实现升降序

news2024/12/24 9:39:36

1.介绍

要求:掌握indexOf()用法;动态绑定类名的对象写法;iconfont使用;split()用法;三元运算符用法;es6模板字符串;

说明:首先综合元素默认有元素并且是降序。服务器传来的数据格式:1: 综合,2: 价格 asc: 升序,desc: 降序 。下面意思是综合,降序。它放在data中searchParams.order里面做响应式数据。

 

 2.vue

说明:采用但是iconfont图标。类名,如果从data里面存入的数据查出1(!=-1),说明就是综合;为li绑定了点击事件,传入了1代表是点击的是综合元素;span标签是为了点击后,有一个升序或者降序的一个图标。如果isAsc为true,那么展示的就是升序图标,那么如果是isDesc为true,那么展示的就是降序。

<li
  :class="{ active: searchParams.order.indexOf('1') != -1 }"
     @click="changeOrder(1)"
                >
     <a>综合<span
         class="iconfont"
          :class="{ 'icon-up-arrow': isAsc, 'icon-down': isDesc }"
          v-show="searchParams.order.indexOf('1') != -1"
           ></span></a>
  </li>
 <li
      :class="{ active: searchParams.order.indexOf('2') != -1 }"
      @click="changeOrder(2)"
                >
       <a>价格<span
           class="iconfont icon-down"
              :class="{ 'icon-up-arrow': isAsc, 'icon-down': isDesc }"
               v-show="searchParams.order.indexOf('2') != -1"
                ></span></a>
</li>

3.js

说明:书写必要的计算属性。如果从order.indexOf("asc")!=-1,代表着是升序。

      isAsc() {
        return this.searchParams.order.indexOf("asc") !== -1;
      },
      isDesc() {
        return this.searchParams.order.indexOf("desc") !== -1;
      },

 4.js

说明:methods里面,点击事件触发,首先我们存储在order数据(vuex三连环获取)进行拆分,数据的格式是[1:desc]。首先我们将综合和排序进行拆分。声明一个新的order属性,判断用户当前点击的是综合还是价格,首先默认就是综合,并且是降序。因此如果相等,那么就成了asc。如果不相等那么desc。否则,用户点击的就是价格了,点击后让他默认降序,然后将newOrder替换order。发送网络请求。

    changeOrder(flag) {
      // 获取的是当前状态,当你改变以后,就成了2:desc
      let originOrder = this.searchParams.order;
      // console.log(originOrder);
      // 综合还是价格
      let originFlag = originOrder.split(":")[0];
      // 升序还是降序
      let originSort = originOrder.split(":")[1];
      //  准备一个新的order属性
      let newOrder = "";
      // 一定是综合(默认)并且默认也是降序
      if (flag == originFlag) {
        // 格式是浏览器规定的
        newOrder = `${originFlag}:${originSort == "desc" ? "asc" : "desc"}`;
      } else {
        // 点击的价格
        newOrder = `${flag}:${"desc"}`;
        // console.log(newOrder);
      }
      this.searchParams.order = newOrder;
      this.getData();
    },

 5.请求函数

说明:请求封装成函数,直接调用。

    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
      //  alert("执行了啊")
    },

 

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

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

相关文章

ELK、ELFK日志分析系统

菜单一、ELK简介1.1 ELK组件说明1.1.1 ElasticSearch1.1.2 Kiabana1.1.3 Logstash 1.2 可以添加的其它组件1.2.1 Filebeat1.2.2 缓存/消息队列&#xff08;redis、kafka、RabbitMQ等&#xff09;1.2.3 Fluentd 1.3 为什么要用ELK1.4 完整日志系统的基本特征1.5 ELK 的工作原理 …

laravel安装composer依赖

一.问题描述 拉取的新项目没有依赖 项目根目录没有vendor目录 报错 二.安装composer,拉取依赖 1.如果没有composer先去下载 官网地址:Packagist / Composer 中国全量镜像 我的博客安装composer:composer最新版本安装_荒-漠的博客-CSDN博客 2.进入项目根目录cmd或者在项目中…

js-6:typeof和instanceof的区别

1、typeof typeof操作符返回一个字符串&#xff0c;表示未经计算的操作数的类型。 operand表示对象或原始值的表达式&#xff0c;其类型将被返回。 从上面的例子可以看出&#xff0c;前6个都是基础数据类型&#xff0c;虽然typeof null为object&#xff0c;但这只是javascrip…

chaitin-Nginx+Docker

Nginx实战 任务一 1、源码包安装NGINX A&#xff0c;搭建Web Server&#xff0c;任意HTML页面&#xff0c;其8080端口提供Web访问服务&#xff0c;截图成功访问http(s)&#x1f615;/[Server1]:8080并且回显Web页面 官网地址&#xff1a;http://nginx.org/en/download.html 步骤…

webpack基础知识九:如何提高webpack的构建速度?

一、背景 随着我们的项目涉及到页面越来越多&#xff0c;功能和业务代码也会随着越多&#xff0c;相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关&#xff0c;当我们本地开发启动 devServer 或者 build 的时候&#xff0c;如果时间过长&#xff…

【CSS3】CSS3 2D 转换 - 三种变换的综合写法 ( 同时进行 移动 / 旋转 / 缩放 变换 | 代码示例 )

文章目录 一、三种变换的综合写法 - 同时进行 移动 / 旋转 / 缩放 变换二、代码示例 一、三种变换的综合写法 - 同时进行 移动 / 旋转 / 缩放 变换 CSS3 的 2D 转换有 移动 / 旋转 / 缩放 , 上述 三种 变换 可同时使用 , 使用语法如下 : transform: translate() rotate() sc…

Vue3+Vite+Pinia+Naive后台管理系统搭建之九:layout 动态路由布局

前言 如果对 vue3 的语法不熟悉的&#xff0c;可以移步Vue3.0 基础入门&#xff0c;快速入门。 1. 系统页面结构 由 menu&#xff0c;面包屑&#xff0c;用户信息&#xff0c;页面标签&#xff0c;页面内容构建 ​ 2. 创建页面 创建 src/pages/layout.vue 布局页 创建 sr…

接口测试——电商网站接口测试实战(四)

1. 接口测试需求分析 常见接口文档提供的两种方式 ①word文档 ②在线文档 电商网站网址模拟练习&#xff1a;Swagger UI 2. 登陆的分析 慕慕生鲜网址&#xff1a;慕慕生鲜账号密码点击execute后 输入账号密码后点击开发者工具&#xff0c;再登录&#xff0c;点击网络&…

PHP 门户信息网站系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 门户信息网站系统 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 下载地址https://download.csdn.net/download/qq_41221322/88179035https://downlo…

EVE-NG MPLS LDP LSP

目录 1 拓扑 2 配置步骤 2.1 配置接口IP 2.2 配置OSPF 2.3 使能LDP 2.3 在VPC上验证 1 拓扑 2 配置步骤 2.1 配置接口IP LER1 interface LoopBack 0ip address 1.1.1.9 32 quitinterface GigabitEthernet1/0ip address 10.1.1.1 255.255.255.0quitinterface GigabitEth…

Harbor企业镜像仓库部署

目录 一、Harbor 架构构成 二、部署harbor环境 1、安装docker-ce&#xff08;所有主机&#xff09; 2、阿里云镜像加速器 3、部署Docker Compose 服务 4、部署 Harbor 服务 5、启动并安装 Harbor 6、创建一个新项目 三、客户端上传镜像 1、在 Docker 客户端配置操作如下…

Leetcode 每日一题 - 删除有序数组中的重复项题 #算法 #Java

1.1 题目 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &#xff…

寻找最佳项目管理工具?这些优秀选择值得一试!

优秀的项目管理工具可以帮助提高管理效率&#xff0c;缩短完成时间&#xff0c;减少困惑和挫折等等。 你的团队是否面临以下问题&#xff1a; 各组织信息独立&#xff0c;缺乏统一管理&#xff1f; 数字建设成本高、周期长、落地难&#xff1f; 数据孤岛&#xff0c;无法复用、…

抖音怎么录屏?这3种方法请你收好

抖音作为全球流行的短视频平台&#xff0c;让我们可以分享生活中的精彩瞬间&#xff0c;欣赏他人的创意作品。有时候&#xff0c;我们可能会遇到一些特别喜欢的视频&#xff0c;希望将其保存下来或与他人分享。本文将为您介绍抖音怎么录屏的全套攻略。通过本文的指导&#xff0…

A33 QT 主线例程 opengl

点击查看 HW33-050 HW33-070 规格书 HW33-050 HW33-070 支持 android 系统和 Linux QT。 HW33-XXX采用4 核Cortex-A7 ARM、Mali400MP2 GPU架构&#xff0c;主频 1.2GHz 的 CPU。内存 存储标配分别为1GB、8GB&#xff0c;内置显卡为Mali400MP2&#xff0c;支持 H.264 1080P …

segment-anything使用说明

文章目录 一. segment-anything介绍二. 官网Demo使用说明三. 安装教程四. python调用生成掩码教程五. python调用SAM分割后转labelme数据集 一. segment-anything介绍 Segment Anything Model&#xff08;SAM&#xff09;根据点或框等输入提示生成高质量的对象遮罩&#xff0c…

提货卡小程序怎么做

提货卡小程序是一款功能强大的应用&#xff0c;为用户提供了便捷的购物和提货体验。以下是其主要功能介绍&#xff1a; 1. 兑换码生成&#xff1a;提货卡小程序可以帮助商家批量生成兑换码。商家可以自定义兑换码的数量和规则&#xff0c;并将其分发给用户。这样&#xff0c;用…

小研究 - Mysql快速全同步复制技术的设计和应用(三)

Mysql半同步复制技术在高性能的数据管理中被广泛采用&#xff0c;但它在可靠性方面却存在不足.本文对半同步复制技术进行优化&#xff0c;提出了一种快速全同步复制技术&#xff0c;通过对半同步数据复制过程中的事务流程设置、线程资源合理应用、批量日志应用等技术手段&#…

网络安全(黑客)工作篇

一、网络安全行业的就业前景如何&#xff1f; 网络安全行业的就业前景非常广阔和有吸引力。随着数字化、云计算、物联网和人工智能等技术的迅速发展&#xff0c;网络安全的需求持续增长。以下是网络安全行业就业前景的一些关键因素&#xff1a; 高需求&#xff1a;随着互联网的…

Segment Anything【论文翻译】

文章目录 论文基础信息如下Abstract1. Introduction2. Segment Anything Task3. Segment Anything Model4. Segment Anything Data Engine5. Segment Anything Dataset6. Segment Anything RAI Analysis7. Zero-Shot Transfer Experiments7.1. Zero-Shot Single Point Valid Ma…