css样式,点击 箭头方向上下转换

server/2024/10/11 9:26:38/

实现效果:

点击切换箭头方向

在这里插入图片描述

在这里插入图片描述

实现代码

    <divclass="modelPart"@click="showClick"><div class="modelPart_left"><img:src=aidefalutIconclass="sNodeIcon"><div>{{ selectModel }}</div><div class="chatText">CHAT</div></div><span :class="dropdown==true?'expand':'down'"class="arrow"></span></div>
<script setup>import { useI18n } from 'vue-i18n';const { t } = useI18n();import { onMounted, ref, watch } from 'vue'const dropdown = ref(false)// 点击事件function showClick () {dropdown.value = !dropdown.value}
</script>
css">  .arrow {display: inline-block;width: 7px;height: 7px;margin-top: -3px;margin-left: 9px;border-top: 2px solid #ffffff;border-left: 2px solid #ffffff;}.down{transform: rotate(225deg);transform-origin: center;transition: all 0.3s;
}.expand {transform: translate(0, 2px) rotate(45deg);transform-origin: center;transition: all 0.3s;}

http://www.ppmy.cn/server/46565.html

相关文章

Nginx 实战-03-nginx 负载均衡

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

11.3 冒泡排序

目录 11.3 冒泡排序 11.3.1 算法流程 11.3.2 效率优化 11.3.3 算法特性 11.3 冒泡排序 冒泡排序&#xff08;bubble sort&#xff09;通过连续地比较与交换相邻元素实现排序。这个过程就像气泡从底部升到顶部一样&#xff0c;因此得名冒泡排序。 如图 11-4 所示…

Spring系统学习 - Spring入门

什么是Spring&#xff1f; Spring翻译过来就是春天的意思&#xff0c;字面意思&#xff0c;冠以Spring的意思就是想表示使用这个框架&#xff0c;代表程序员的春天来了&#xff0c;实际上就是让开发更加简单方便&#xff0c;实际上Spring确实做到了。 官网地址&#xff1a;ht…

LabVIEW在高校电力电子实验中的应用

概述&#xff1a;本文介绍了如何利用LabVIEW优化高校电力电子实验&#xff0c;通过图形化编程实现参数调节、实时数据监控与存储&#xff0c;并与Simulink联动&#xff0c;提高实验效率和数据处理能力。 需求背景高校实验室在进行电机拖动和电力电子实验时&#xff0c;通常使用…

基于Springboot驾校预约平台小程序的设计与实现(源码+数据库+文档)

一.项目介绍 系统角色&#xff1a;管理员、教练、学员 小程序(仅限于学员注册、登录)&#xff1a; 查看管理员发布的公告信息 查看管理员发布的驾校信息 查看所有教练信息、预约(需教练审核)、评论、收藏喜欢的教练 查看管理员发布的考试信息、预约考试(需管理…

Python——cv2 判断图像读取内容是否为空

import cv2 pic_path"xxx.jpg" imagecv2.imread(pic_path) if None image:print("图片为空") else:print("图片不为空")

EureKa是什么?

Eureka 是一个源于 Netflix 公司的开源项目&#xff0c;主要用于实现服务注册和服务发现的功能。它是构建分布式系统中的微服务架构的一个关键组件。下面是对 Eureka 的解释&#xff1a; 基本概念 Eureka 是基于 REST 的服务&#xff0c;主要用于管理微服务架构中的服务实例的…

GPT-4o:人工智能的新篇章

GPT-4o&#xff1a;人工智能的新篇章 简介 人工智能领域不断进步&#xff0c;GPT系列作为其中的佼佼者&#xff0c;其最新版本GPT-4o的推出引起了广泛关注。本文将对GPT-4o进行评价&#xff0c;从版本对比、技术能力到个人感受&#xff0c;全方位探讨这一革命性的语言模型。 …