vue多选功能

废话不多说,直接上代码!!!

<template><div class="duo-xuan-page"><liv-for="(item, index) in list":key="index"@click="toggleSelection(item)":class="{ active: selectedItems.includes(item) }">{{ item.tit }}</li></div>
</template><script>export default {name: 'duo-xuan',data () {return {list: [{tit: '点我选择111'},{tit: '点我选择222'},{tit: '点我选择333'},{tit: '点我选择444'},{tit: '点我选择555'},{tit: '点我选择666'},{tit: '点我选择777'},{tit: '点我选择888'},{tit: '点我选择999'},{tit: '点我选择1010'}],selectedItems: [] // 用于存储已选中项的每一项}},methods: {toggleSelection(item) {// 检查已选中项数组中是否包含当前点击项const selectedIndex = this.selectedItems.indexOf(item);if (selectedIndex === -1) {// 如果当前项未被选中,则把点击项添加到数组中this.selectedItems.push(item);} else {// 如果当前项已被选中,则从已选中项数组中移除this.selectedItems.splice(selectedIndex, 1);}}}}
</script><style lang="scss" scoped>
.duo-xuan-page {width: 100vw;height: 100vh;padding: 0 10px;box-sizing: border-box;overflow: auto;li {line-height: 100px;text-align: center;background-color: #ddd;list-style: none;margin: 20px 0;border-radius: 10px;font-size: 18px;font-weight: bold;&.active {border: 3px solid #67c23a;position: relative;&::before {content: '';position: absolute;top: 0px;right: 10px;width: 6px;height: 12px;border-bottom: 3px solid #fff;border-right: 3px solid #fff;transform: rotate(40deg);-webkit-transform-origin: left bottom;transform-origin: left bottom;z-index: 2;}&::after {content: "";position: absolute;top: 0px;right: 0px;width: 0;height: 0;border-left: 45px solid transparent;border-top: 45px solid #67c23a;z-index: 1;}}}
}
</style>

效果图

 

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

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

相关文章

ue引擎游戏开发笔记(36)——为射击落点添加特效

1.需求分析&#xff1a; 在debug测试中能看到子弹落点后&#xff0c;需要给子弹添加击中特效&#xff0c;更真实也更具反馈感。 2.操作实现&#xff1a; 1.思路&#xff1a;很简单&#xff0c;类似开枪特效一样&#xff0c;只要在头文件声明特效变量&#xff0c;在fire函数中…

Leetcode—232. 用栈实现队列【简单】

2024每日刷题&#xff08;131&#xff09; Leetcode—232. 用栈实现队列 实现代码 class MyQueue { public:MyQueue() {}void push(int x) {st.push(x);}int pop() {if(show.empty()) {if(empty()) {return -1;} else {int ans show.top();show.pop();return ans;}} else {i…

Burp Suite 抓包,浏览器提示有软件正在阻止Firefox安全地连接到此网站

问题现象 有软件正在阻止Firefox安全地连接到此网站 解决办法 没有安装证书&#xff0c;在浏览器里面安装bp的证书就可以了 参考&#xff1a;教程合集 《H01-启动和激活Burp.docx》——第5步

金蝶BI应收分析报表:关于应收,这样分析

这是一张出自奥威-金蝶BI方案的BI应收分析报表&#xff0c;是一张综合运用了筛选、内存计算等智能分析功能以及数据可视化图表打造而成的BI数据可视化分析报表&#xff0c;可以让企业运用决策层快速知道应收账款有多少&#xff1f;账龄如何&#xff1f;周转情况如何&#xff1f…

ARTS Week 27

Algorithm 本周的算法题为 58. 最后一个单词的长度 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 1&#xff1a;输入&#xff1a…

JAVA基础面试题(第十一篇)上! JVM

Hello好久不见&#xff01;&#xff0c;最近我们讲更新JVM部分的面试题。 JVM 这块比较难理解&#xff0c;而且也是不擅长的点。所以今天我更新一下JVM希望小伙伴们能在面试中取得好成绩&#xff01; JVM 1. 什么是JVM内存结构&#xff1f; jvm将虚拟机分为5大区域&#xff0…

上市公司-库存周转率、供应链效率明细数据集(2000-2022年)

01、数据介绍 库存周转率是衡量企业库存管理效率的关键指标之一&#xff0c;它反映了企业库存的流转速度。而供应链效率则体现了企业在整个供应链管理中的表现&#xff0c;包括采购、生产、物流等环节的协同和优化。 提高库存周转率和供应链效率是上市公司优化企业运营和管理…

ICode国际青少年编程竞赛- Python-2级训练场-识别循环规律2

ICode国际青少年编程竞赛- Python-2级训练场-识别循环规律2 1、 for i in range(3):Dev.step(3)Dev.turnRight()Dev.step(4)Dev.turnLeft()2、 for i in range(3):Spaceship.step(3)Spaceship.turnRight()Spaceship.step(1)3、 Dev.turnLeft() Dev.step(Dev.x - Item[1].…

编译和链接(超详细)

✅博客主页:爆打维c-CSDN博客​​​​​​ &#x1f43e; &#x1f539;分享c语言知识及代码 一、编译和链接实例 假设我们有一个名为main.c的C语言源文件&#xff0c;它包含了一个简单的Hello World程序。我们可以使用gcc编译器对该源文件进行编译&#xff0c;生成一个可执行…

出海战略与网络技术:SOCKS5代理、代理IP与跨界电商与游戏行业的全球扩展

在全球市场日益融合的今天&#xff0c;中国的电商与游戏企业越来越多地采用“出海”战略&#xff0c;寻求在国际市场中拓展业务。在这一过程中&#xff0c;技术手段如SOCKS5代理和代理IP在网络安全和数据流通方面发挥着关键作用。本文旨在探讨这些技术如何助力跨界电商和游戏行…

AI大模型探索之路-训练篇18:大语言模型预训练-微调技术之Prompt Tuning

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…

亚马逊是如何铺设多个IP账号实现销量大卖的?

一、针对亚马逊平台机制&#xff0c;如何转变思路&#xff1f; 众所周知&#xff0c;一个亚马逊卖家只能够开一个账号&#xff0c;一家店铺&#xff0c;这是亚马逊平台明确规定的。平台如此严格限定&#xff0c;为的就是保护卖家&#xff0c;防止卖家重复铺货销售相同的产品&a…

【读论文】Gaussian Grouping: Segment and Edit Anything in 3D Scenes

Gaussian Grouping: Segment and Edit Anything in 3D Scenes 文章目录 Gaussian Grouping: Segment and Edit Anything in 3D Scenes1. What2. Why3. How3.1 Anything Mask Input and Consistency3.2 3D Gaussian Rendering and Grouping3.3 Downstream: Local Gaussian Editi…

10000 字详细讲解 Spring 中常用注解及其使用

如下图京东购物页面&#xff0c;当我们选择点击访问某一类商品时&#xff0c;就会向后端发起 HTTP 请求&#xff0c;当后端收到请求时&#xff0c;就会找到对应的代码逻辑对请求进行处理&#xff0c;那么&#xff0c;后端是如何来查找处理请求相对应的代码呢&#xff1f;答案就…

七、VUE过滤器

一、初识VUE 二、再识VUE-MVVM 三、VUE数据代理 四、VUE事件处理 五、VUE计算属性 六、Vue监视属性 七、VUE过滤器 七、VUE内置指令 九、VUE组件 过滤器&#xff1a; 对要显示的数据进行特定格式化后再显示&#xff08;适用于一些简单逻辑的处理&#xff09;。 语法&#xff…

计算机考研|25人太难了,408会炸,还是自命题会炸?

自命题已经不是炸不炸的问题了&#xff0c;是有没有学上的问题。 我记得去年九月一些学校宣布改考408的时候&#xff0c;整个群里都炸了&#xff0c;同学一片哀嚎。要知道九月的时候要重新准备408肯定是不可能了&#xff0c;一来408复习的基础阶段已经过去了&#xff0c;二来英…

人工智能哪些大学比较好

人工智能领域的大学有很多&#xff0c;以下是一些国际上被广泛认可的一流大学&#xff1a; 1. **斯坦福大学&#xff08;Stanford University&#xff09;** - 位于美国加州的斯坦福大学拥有顶尖的人工智能研究中心&#xff0c;并在机器学习、自然语言处理等领域处于领先地位。…

phpstudy(MySQL启动又立马停止)问题的解决办法

方法一&#xff1a;查看本地安装的MySQL有没有启动 1.鼠标右击开始按钮选择计算机管理 2.点击服务和应用程序 3.找到服务双击 4.找到MySQL服务 5.双击查看是否启动&#xff0c;如启动则停止他&#xff0c;然后确定&#xff0c;重新打开phpstudy,启动Mysql. 方法二&#xff…

Scala特殊符号含义

1. ::: &#xff08;三个冒号&#xff09;只用于连接两个List类型的集合 val a List(1,2) val b List(3,4) val c a ::: b2. :: (两个冒号&#xff09;表示普通元素与List的连接操作 val a 1 val b List(3,4) val c 1 :: b::是右侧对象的方法&#xff0c;即它是对象b的…

利用webpack拆分css

利用webpack拆分css {ignore} 要拆分css&#xff0c;就必须把css当成像js那样的模块&#xff1b;要把css当成模块&#xff0c;就必须有一个构建工具&#xff08;webpack&#xff09;&#xff0c;它具备合并代码的能力 而webpack本身只能读取css文件的内容、将其当作JS代码进行…