vue点击变色

news2024/11/18 19:43:27

       vue点击一个遍历后元素改变其颜色的方法,有两种情况,第一种是点击单行元素变色,点击另一行元素时,原来变色的元素变回原来的颜色,始终只有一行元素是变色的,第二种情况是点击后永久变色,点击其他元素变色不影响已经变色的元素。

第一种情况单行变色

<div  v-for="(item,index) in msg">

<text :class="[{box:link==index},{box1:link!=index}]" @tap="btn(index)"  >点击介绍</text>

</div>

data(){
            return{

link:null

}

methods:{
            btn(index){
                this.link=index
            }
            },

第二种情况永久变色

<div  v-for="(item,index) in msg">

<text :class="[{box:link[index]==index},{box1:link[index]!=index}]" @tap="btn(index)"  >点击介绍</text>

</div>

data(){
            return{

link:[]

}

methods:{
            btn(index){
                this.link[index]=index
            }
            },

两者的重要区别就在于变量link的使用,一个是普通变量,一个是数组,运用场景可以是标记已经点击过的标题

 吃的,穿的,用的想知道成分是什么,可以用小程序成分随手查一查

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

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

相关文章

手把手教你部署前端项目

手把手教你部署前端项目 1.1 用Vue-cli构建简易前端项目 1.1.1 安装 Vue CLI 包 打开命令行工具&#xff0c;执行下列命令来安装 Vue CLI 包&#xff1a; npm install -g vue/cli可以用下面的命令查看是否安装成功&#xff1a; vue --version1.1.2 创建一个项目 新建一个…

背景图片相关应用-铺满,自适应

1.首先了解一下背景相关属性 background-color&#xff1a; 颜色。 background-position&#xff1a; 位置。 数值&#xff0c;或者top,right,bottom,left等&#xff0c;center&#xff1a;距离页面左边的定位&#xff0c;0px&#xff1a;距离页面上面的定位 background-si…

Cesium3Dtilesets 使用customShader的解读以及泛光效果示例

前言&#xff1a;光带原理在旋转弹跳四棱锥这篇文章里早已经阐述过&#xff0c;但还是有不少靓仔靓女可能会感到疑惑&#xff0c;在3Dtilesets里怎么使用&#xff1f;为啥我在网上看到的为数不多的代码示例我看不懂&#xff1f;是由于没理解透彻导致的。借此机会&#xff0c;提…

SocketIO介绍+SpringBoot整合SocketIO完成实时通信

Socket.IO笔记 即时通信是基于TCP长连接&#xff0c;建立连接之后&#xff0c;客户段/服务器可以无限次随时向对端发送数据&#xff0c;实现服务器数据发送的即时性 HTTP HTTP是短链接&#xff0c;设计的目的是减少服务器的压力 HTTP伪即时通讯 轮询 emmet长轮询 long pulling…

vue打包之后出现空白页的原因以及解决方式

路由模式 history 新建项目什么都不动&#xff0c;路由模式&#xff1a;history, 直接npm run build打包 打包之后&#xff0c;直接打开dist文件里面的ndex.html可以看到页面是空白的&#xff0c;控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入…

【前端】React使用react-markdown+antd实现引入渲染markdown文件

项目中遇见一个需求&#xff0c;要求直接在浏览器打开markdown文件进行预览&#xff0c;初次使用遇见一些坎坷&#xff0c;以下记录实现过程&#xff0c;将其封装成了一个组件。 1.下载依赖 yarn add react-markdown//其余样式插件&#xff1a; yarn add remark-gfm yarn …

vue+springboot使用文件流实现文件下载

前言 本次将使用vue和springboot通过文件流的方式教大家怎么去实现文件的下载&#xff0c;那么话不多说&#xff0c;我们直接开始 相关vue导出文件 以下链接为我其他vue进行下载导出文件文章 vue实现把字符串导出为txt 步骤 文件路径 要进行下载的话&#xff0c;我们肯定…

WEB核心【案例:文件下载,案例:点击切换验证码,几种获取properties资源方式】第十二章

目录 1.文件下载 1.1超链接下载&#xff1a; 1.2自定义servlet下载 1.3小结 2.点击切换验证码 2.1前置只是-验证码生成 2.2分析及代码实现 2.3需求2&#xff1a;点击切换验证码-绕过缓存 3.几种获取preperties资源方式 &#x1f49f;作者简介&#xff1a;大家好呀&…

CTF中Web题目的各种基础的思路-----入门篇十分的详细

我期间也考察很多人的&#xff0c;但搞这个的确实有点少&#xff0c;希望这篇可以大家一点帮助&#xff0c;这篇文章也借鉴一些人的文章&#xff0c;还有很多东西&#xff0c;我没搞&#xff0c;确实有点麻烦&#xff0c;但以后还会不断更新的&#xff0c;希望大家在web这里少走…

Web系统常见安全漏洞介绍及解决方案-CSRF攻击

&#x1f433;博客主页&#xff1a;拒绝冗余 – 生命不息&#xff0c;折腾不止 &#x1f310;订阅专栏&#xff1a;『Web安全』 &#x1f4f0;如觉得博主文章写的不错或对你有所帮助的话&#xff0c;还望大家多多支持呀&#xff01; &#x1f449;关注✨、点赞&#x1f44d;、收…

CSS基本布局——grid布局

grid布局简介&#xff1a; Grid布局是将容器划分成“行”和“列”&#xff0c;产生单元格&#xff0c;然后指定“项目所在”的单元格&#xff0c;可以看作是二维布局。 基本概念&#xff1a; 容器&#xff08;container&#xff09;——有容器属性项目&#xff08;items&…

vite项目优化

首先在讲述vite优化之前&#xff0c;我们先来分析一下和传统的项目管理构建工具的区别&#xff0c;以webpack为例&#xff0c;它是利用plugin插件和loader加载器对项目的所有模块和依赖统一通过入口文件进行编译&#xff0c;从而变成我们html所需要的js格式渲染我们的页面。 随…

Vue项目目录结构介绍(三)

前言 本章我们会对一个 Vue 项目的目录结构进行讲解&#xff0c;解释各子目录以及文件的作用&#xff0c;前端的模块化&#xff0c;Vue 单文件组件规范等。 1、基础目录和文件介绍 在上一章&#xff0c;我们通过 vue-cli 创建了一个新的项目&#xff0c;生成的项目目录里已经包…

tauri+vite+vue3开发环境下创建、启动运行和打包发布

目录 1.创建项目 2.安装依赖 3.启动项目 4.打包生成windows安装包 5.安装打包生成的安装包 1.创建项目 运行下面命令创建一个tauri项目 pnpm create tauri-app 我创建该项目时的node版本为16.15.0 兼容性注意 Vite 需要 Node.js 版本 14.18&#xff0c;16。然而&#x…

【玩转CSS】这些高级技巧,你都会吗

&#x1f525;一个人走得远了&#xff0c;就会忘记自己为了什么而出发&#xff0c;希望你可以不忘初心&#xff0c;不要随波逐流&#xff0c;一直走下去&#x1f3b6; &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; &#x1f984; …

js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标

一、js去掉两个数组相同的元素 注意&#xff1a;这里并非是数组去重&#xff0c;数组去重是去掉一个数组中相同的元素&#xff0c;这里是比较两个数组&#xff0c;过滤掉二者相同的&#xff0c;留下不同的。 通过 some() 在对方数组里面查找相同元素&#xff0c;再利用filter…

老老实实的程序员该如何描述自己的缺点

答辩的时候&#xff0c;晋升的时候&#xff0c;面试的时候&#xff0c;你有没有经常遇到一个问题&#xff0c;那就是你觉得自己有什么缺点吗&#xff1f; 目录 1. 每个人都有缺点 2. 这道题在考什么&#xff1f; 3. 我之前是怎么回答的 4. 你可以这样回答试一试 5. 总结 …

浅析<router-view> v-slot事例

官方关于<router-link> 的 v-slot的相关介绍: https://router.vuejs.org/zh/api/#router-view-%E7%9A%84-v-slot 并给出了一个例子&#xff1a; <router-view v-slot"{ Component, route }"><transition :name"route.meta.transition || fade&q…

selenium驱动Firefox安装和环境配置

目录 一、前言 二、版本 三、配置环境 四、在pycharm中添加selenium 五、测试代码&#xff0c;成功打开百度&#xff0c;则配置成功 一、前言 根据多篇文章总结了一下自己操作过程&#xff0c;主要是想记录一下。 二、版本 1.查看自己的Firefox的版本&#xff0c;在浏览器…

Web视频video自动播放(移动端及PC端)

做了个关于视频播放的活动&#xff0c;被各种问题折腾得精疲力竭。为了日后能够轻松点&#xff0c;特记录下出现的各种问题及解决方法。 活动要适配移动端&#xff08;IPhone、Android&#xff09;和PC端&#xff08;Chrome&#xff09; 需要解决的问题&#xff1a;移动端禁止全…