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

实现效果:

点击切换箭头方向

在这里插入图片描述

在这里插入图片描述

实现代码

    <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>
  .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.mzph.cn/diannao/17786.shtml

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

相关文章

Scala的简单认识

Scala编程基础 小白的Scala学习笔记 2024/5/21 上午某一时刻 文章目录 Scala编程基础spark是用Scala开发出来的Scala的优点 打开idea 搜索scala&#xff0c;安装 如果不小心点了取消&#xff0c;或者没有上图的提示&#xff0c;就在依赖里面添加 spark是用Scala开发出来的 类比…

英语学习笔记21+23——Which book?/Which glasses?

Which book?/Which glasses? 哪本书&#xff1f;/哪些杯子&#xff1f; 词汇 Vocabulary give v. 给 搭配&#xff1a;Give me five! 击掌庆祝 用法&#xff1a;give 人 东西     give 东西 to 人    把……东西给某人 例句&#xff1a;把这些苹果给 Bobby.   …

元宇宙vr美术虚拟展馆激发更多文化认同和互鉴

科技引领创新潮流&#xff0c;借助前沿的Web3D技术&#xff0c;我们为用户打造了一个沉浸式的纯3D虚拟空间体验平台&#xff1a;元宇宙线上互动展厅。您只需通过网页即可轻松访问这个充满未来感的互动平台。 在这个独特的虚拟环境中&#xff0c;用户可以轻松创建个性化角色&…

缓存三问与缓存预热-如何预防缓存崩溃

一、缓存三剑客 &#xff08;图片来源&#xff1a;什么是缓存雪崩、击穿、穿透&#xff1f; | 小林coding&#xff09; 缓存穿透 (Cache Penetration) 又称"空缓存"指用户请求的数据在缓存和数据库中都不存在,导致每次请求都去查询数据库,给数据库带来巨大压力。解…

【深度学习】【NLP】词表,分词,嵌入

from transformers import AutoTokenizertokenizer AutoTokenizer.from_pretrained("prajjwal1/bert-tiny") tokenizer.save_pretrained("./bert-tiny/")input_string "Your input string here 我是中文" token_ids tokenizer.encode(input_s…

【PID算法详解】

PID算法 PID算法介绍用途pid数学表达式及其含义P算法D算法I算法 PID总结数学公式转换代码设计实际运用PID代码实现 PID算法介绍 PID控制器是一种广泛应用于工业控制系统的反馈控制器&#xff0c;它通过比例&#xff08;Proportional&#xff09;、积分&#xff08;Integral&am…

快写猪好用吗 #知识分享#笔记#学习方法

快写猪是一个非常好用的论文写作工具&#xff0c;它提供了强大的查重降重功能&#xff0c;帮助用户轻松完成论文写作任务。无论是在学术研究还是日常写作中&#xff0c;快写猪都能提供高效、准确的检测&#xff0c;确保文本的原创性和质量。 首先&#xff0c;快写猪的查重降重功…

c 系统宏有多少

在C语言中&#xff0c;系统宏&#xff08;也称为预定义宏或内置宏&#xff09;的数量并不是固定的&#xff0c;因为它们取决于C标准、编译器以及可能的其他因素。然而&#xff0c;有一些常见的预定义宏是几乎所有C编译器都支持的。 以下是一些常见的C预定义宏&#xff1a; __…

利用预测大模型完成办公室饮水机剩余热水量

背景 在每天上班的时候&#xff0c;很多同事都有喝热水的习惯&#xff0c;但是饮水机内的热水量总是比较少的&#xff0c;如何避免等待&#xff0c;高效的接到热水是我接下来要做的事情的动机。 理论基础 在大量真实数据的情况下&#xff0c;可以分析出用水紧张的时间段和用水…

【css3】01-css3新特性样式篇

目录 1 背景 1.1 设置背景图片的定位 1.2 背景裁切-规定背景的绘制区域 1.3 设置背景图片尺寸 2 边框 2.1 盒子阴影box-shadow 2.2 边框图片border-image 3 文本 -文字阴影text-shadow 1 背景 1.1 设置背景图片的定位 background-origin&#xff1a;规定背景图片的定位…

科技守护,河流水文监测保障水资源安全!

中小河流是城乡水资源的补给&#xff0c;又是不可或缺的排放渠道&#xff0c;维系着城乡水资源的平衡与生态的健康。然而&#xff0c;随着工业化、城市化的快速推进&#xff0c;河流生态环境面临着越来越大的压力。为了有效保护和合理利用河流资源&#xff0c;河流水文监测成为…

2024年新算法-红嘴蓝鹊优化器(RBMO)优化BP神经网络回归预测

2024年新算法-红嘴蓝鹊优化器(RBMO)优化BP神经网络回归预测 亮点&#xff1a; 输出多个评价指标&#xff1a;R2&#xff0c;RMSE&#xff0c;MSE&#xff0c;MAPE和MAE 满足需求&#xff0c;分开运行和对比的都有对应的主函数&#xff1a;main_BP, main_RBMO, main_BPvsBP_R…

亡羊补牢,一文讲清各种场景下GIT如何回退

系列文章目录 手把手教你安装Git&#xff0c;萌新迈向专业的必备一步 GIT命令只会抄却不理解&#xff1f;看完原理才能事半功倍&#xff01; 常用GIT命令详解&#xff0c;手把手让你登堂入室 GIT实战篇&#xff0c;教你如何使用GIT可视化工具 GIT使用需知&#xff0c;哪些操作…

区块链的运行原理与演示

目录 前言 具体演示 1、在浏览器中输入区块链演示网址&#xff1a; 2、创建新区块 3、篡改区块信息使其无效 4、新增P2P 网络节点。 5、节点连接。 6、区块信息同步 总结 前言 区块链系统是由一系列分布在全球各地的分布式节点组成的。这些节点互不隶属&#xff0c;通过…

Mesa GL Dispatch分发分析与理解

Mesa GL Dispatch分发分析与理解 引言 这篇博客的核心是从OpenGL应用程序的典型api入手&#xff0c;分析gl api 调用到用户态驱动后端的过程&#xff0c;进而总结出一个典型的调用栈。理解了这个典型调用栈&#xff0c;对后续任何一个API的调用过程分析&#xff0c;都是a piec…

文本匹配.grep与Select-String用法对比

Linux Shell与PowerShell上匹配字符串 grep与Select-String用法对比 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article…

家居厨房安全无小事:可燃气体报警器探头校准检测重要性解析

家居厨房作为日常生活中烹饪美食的重要场所&#xff0c;其安全问题不容忽视。 近年来&#xff0c;随着家庭用气设备的普及&#xff0c;煤气泄露事件时有发生&#xff0c;给人们的生命财产安全带来了严重威胁。 因此&#xff0c;安装可燃气体报警器探头&#xff0c;及时检测并…

Python Orange3库:数据挖掘与机器学习的终极利器

更多Python学习内容&#xff1a;ipengtao.com Orange3是一个开源的数据挖掘和机器学习库&#xff0c;提供了丰富的工具和算法来处理和分析数据。Orange3的图形用户界面使得非编程用户也能轻松进行数据分析&#xff0c;而其Python API则为编程用户提供了强大的灵活性。本文将详细…

如何在线转换图片的格式?一键修改图片格式的方法

图片是日常生活和工作中的一种常用的内容展示类型&#xff0c;在使用图片的时候不同用途需要使用的图片格式也是不同的&#xff0c;比如我们手中有一张jpg格式图片&#xff0c;但是平台上传要求格式是png&#xff0c;那么怎样才能将jpg转png格式呢&#xff1f;下面将教大家图片…

模拟量4~20mA电流传感器接线方式

一、模拟量4~20mA电流传感器接线方式 无源双线制是常见的电流型传感器接线方式&#xff0c;它具有简单、经济的特点。其接线方式如下&#xff1a; 传感器的“”接到数据采集器的电源“”上&#xff0c; 传感器的“-”端子连接到数据采集器的“AI”端子上&#xff0c; 数据采集器…