VUE3页面div点击改变样式

news2024/11/24 14:42:38

如题目所示。

用上VUE之后,前后端分离,组件式开发,代码复用、独立性和隔离性都挺好,可维护性得以提高。相比之下,以前用jQuery,代码实在太多了。

不过,vue有个地方不大好,就是控制页面元素的样式比较死板。现在用vue和react的话,基本都会选用一种UI框架,比如element plus,或者ant design等。UI框架通常比较强大,效果也很煊,比自己动手写强多了。但如果有些自己还想额外加一些效果的话,就会发现困难重重,不像以前用jquery那么好控制。

比如,我想罗列 4 个div,代表4种分类。点击其中一个,就加上置亮的边框;再点击,取消置亮。在ant design vue里找来找去,没有这种控件,只好自己写。代码如下:
在这里插入图片描述

<template>
  <div class="c-container">
    <div
      v-for="(item, index) in items"
      :key="index"
      :class="
        isActive === index
          ? 'c-item c-item-selected'
          : 'c-item c-item-noselected'
      "
      :style="`background:url(各种图标) no-repeat center 15px;`"
      @click="changeCategory(item, index)"
    >
      <div class="c-text">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRefs, reactive, onMounted, ref } from "vue";
import { getCategory } from "@/components/Category";
import * as tools from "@/utils";

export default defineComponent({
  setup(props, context) {
    let isActive = ref(-1);

    const changeCategory = (item, index) => {
      if (isActive.value !== index) {//如果点击的div没有处于置亮状态,则置亮
        isActive.value = index;
      } else {//否则取消置亮
        isActive.value = -1;
      }
    };

    const state = reactive({
      items: [],
    });
    onMounted(async () => {
        state.items = 。。。;//获取分类数据
    });
    
    return {
      ...toRefs(state),
      changeCategory,
      isActive,
    };
  },
});
</script>

<style scoped>
.c-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  min-width: 390px;
}
.c-item {
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.c-item-noselected {
  border: solid 1px #eee;
}
.c-item-selected {
  border: solid 1px #1270d6;
}
.c-text {
  margin-top: 60px;
}
</style>

代码中主要用了isActive这个响应式变量。其中重点代码为:

   :class="
     isActive === index
       ? 'c-item c-item-selected'
       : 'c-item c-item-noselected'
   "
  let isActive = ref(-1);

  const changeCategory = (item, index) => {
    if (isActive.value !== index) {//如果点击的div没有处于置亮状态,则置亮
      isActive.value = index;
    } else {//否则取消置亮
      isActive.value = -1;
    }
  };

注意这个isActive,忽而isActive.value,忽而 isActive === index,让人摸不着头脑。这是VUE的语法,没办法。

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

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

相关文章

算法基础(二)(共有30道例题)

六、数据结构 &#xff08;一&#xff09;数组 定义&#xff1a;数组是存放在连续内存空间上的相同类型数据的集合。数组可以方便的通过下标索引的方式获取到下标下对应的数据。 注意&#xff1a; &#xff08;1&#xff09;数组下标都是从0开始的。 &#xff08;2&#xff0…

【SWAT水文模型】SWAT水文模型建立及应用第二期:土地利用数据的准备(待更新)

SWAT水文模型建立及应用&#xff1a;土地利用数据的准备 1 简介2 土地利用数据的下载1.1 数据下载方式1.2 数据下载 2 土地利用数据的准备2.1 矢量转栅格2.2 土地利用类型的重分类2.3 土地利用分布图投影调整2.4 土地利用类型索引表建立 参考 SWAT水文模型建立及应用第一期主要…

前苹果设计总监创办,Humane想用AI+AR界面取代手机

在2001年&#xff0c;微软研究院一位工程师Gordon Bell开始了一段长时间的“生活记录”&#xff08;Lifelogging&#xff09;之旅&#xff0c;他会在胸前、头顶或是眼镜腿处佩戴相机&#xff0c;每30秒自动拍摄一张照片&#xff0c;以捕捉自己生命中的瞬间&#xff0c;记录下他…

数字化转型导师坚鹏:金融科技与保险公司转型

金融科技与保险公司转型 课程背景&#xff1a; 数字化背景下&#xff0c;很多保险公司存在以下问题&#xff1a; 不了解保险公司数转型现状、困惑与成功方法&#xff1f; 不清楚金融科技如何赋能保险公司数字化转型&#xff1f; 不了解保险公司数字化转型标杆企业成功案…

Linux系统上C程序的编译与调试

gcc分布编译链接&#xff1a; 预处理&#xff08;Pre-Processing&#xff09;编译&#xff08;Compiling&#xff09;汇编&#xff08;Assembling&#xff09;链接&#xff08;Linking&#xff09; gcc -E hello.c -o hello.i #预处理 gcc -S hello.i -o hello.s #编译 gcc -c…

ThingsBoard教程更新通知,规则节点全解析系列更新

前言 自从 《ThingsBoard系列教程》 专栏上线&#xff0c;我收到了很多读者的认同和肯定&#xff0c;这是我一直坚持分享的理由之一&#xff0c;做有价值的事&#xff0c;帮助他人。前段时间因为写书和学习的原因&#xff0c;ThingsBoard专栏已经4个月没更新。这就导致一些读者…

【点击查看】讯飞星火正在回答···

Hi&#xff0c;开发者&#xff1a; 关于世界&#xff0c;你有过什么样的疑问&#xff1f;每一次的提问&#xff0c;都代表着我们在关注什么&#xff0c;思考什么&#xff0c;好奇什么。世界的每一次更新&#xff0c;都始于一个新的提问。 我是讯飞星火认知大模型&#xff0c;…

【爆肝更新】第二章:Python基础语法——保姆级,超万字!

这一章我们开始学习Python的基础语法&#xff0c;包含字面量&#xff0c;运算符&#xff0c;变量&#xff0c;字符串格式化&#xff0c;input函数等&#xff0c;这一章是为整个Python体系学习打好基础&#xff0c;所以一定要重视起来。 习惯看视频的同学可以看这个免费教程&am…

面试题30天打卡-day13

1、Linux 中的硬链接和软连接是什么&#xff0c;二者有什么区别&#xff1f; 在Linux系统下&#xff0c;有两种链接文件&#xff0c;一种是硬链接&#xff08;Hard Link&#xff09;&#xff0c;一种是软链接&#xff0c;也称为符号链接&#xff08;Symbolic Link&#xff09;…

Linux-使用mobaxterm连接虚拟机ubuntu

一、准备工作 VMware&#xff1a;16.0.0 Ubuntu&#xff1a;18.4 MobaxTerm&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1dNsahe9wO5KrWlWXtNqT0A?pwdaz39 提取码&#xff1a;az39 二、实操 1.检查系统是否安装ssh service sshd status 如果显示未安装&#xff0…

Notes/Domino的未来在于

大家好&#xff0c;才是真的好。 很多企业不谈论应用程序&#xff0c;让Domino的平台价值和市场前景变得有些黯淡。 毕竟作为全球第一款企业级的邮箱平台&#xff0c;过去大部分企业和组织都在使用Notes/Domino。而从10来年前&#xff0c;很多企业开始大规模地由Notes/Domino…

GPT-3.5 生成 Fabric Cypher

GPT-3.5 生成 Fabric Cypher GPT-3.5 生成 Fabric CypherFabric 架构图数据库节点设计图数据模型设计Fabric 快速开始指南下载必要资源配置 构建数据在graph-node-1节点构建股票图谱在graph-node-2节点构建高管图谱 GPT-3.5 生成 Fabric Cypher Here’s the table of contents:…

【Java】『蓝桥杯』10道编程题及答案(四)

系列文章 【Java】『蓝桥杯』10道编程题及答案&#xff08;一&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/130223115 【Java】『蓝桥杯』10道编程题及答案&#xff08;二&#xff09; 本文链接&#xff1a;https://blog.csdn.net/y…

五种PDF转Word免费的软件!(附带转换效果对比!)

本文将介绍种PDF转Word免费软件&#xff0c;让您快速将PDF文件转换为可编辑的Word文件。 随着现代科学技术的飞速发展&#xff0c;PDF格式已经成为我们工作和生活中常用的文档格式之一。PDF文件的格式是固定的&#xff0c;不容易被篡改&#xff0c;因此经常被用来制作各种关键文…

1691_python学习笔记之week3_递归

全部学习汇总&#xff1a; GreyZhang/python_basic: My learning notes about python. (github.com) 最初接触递归的时候觉得这个有点不好理解&#xff0c;怎么能够有这种思维方式&#xff1f;这完全不同于之前自己所能够了解的那种一加一等于二的方式。相对于能够看得见的那种…

企业采购都在用什么系统管理采购流程?ERP够用了吗?

ERP&#xff08;企业资源计划&#xff09;和采购管理系统都是企业信息化系统的一部分&#xff0c;它们在企业中扮演着不同的角色。下面是它们之间的区别&#xff1a;区别 功能不同&#xff1a;ERP系统是一个综合性的企业管理系统&#xff0c;覆盖范围广&#xff0c;包括财务、人…

Android12 material you 动态配色

动态配色功能是 Material You 设计的核心 一、完整的动态配色流程包括四个步骤&#xff0c;如下所示&#xff1a; 用户通过 OEM 选择器更改壁纸或主题。AOSP 逻辑会自动从所选壁纸中提取单一源颜色。将源颜色扩展到颜色API&#xff0c;AOSP 将单一源颜色扩展为 5 &#xff0c;…

JS实现拼音(字母)匹配(搜索)汉字(姓名)

这就是个模糊查询&#xff0c;我们平常做的都是直接输入汉字去把对应的值过滤出来&#xff0c;但我还真是第一次通过拼音去查询&#xff08;当然不只是拼音&#xff0c;汉字也是可以的&#xff09;&#xff0c;以前还真没注意这个。唉&#xff0c;这可咋搞&#xff0c;我怎么知…

python:面向对象编程(知识点+代码)

文章目录 一、类和对象1、对象属性的默认值设置2、对象属性的添加、修改与删除3 、类属性 二、类的继承 引言&#xff1a;面向对象编程时一门编程语言重要的功能&#xff0c;我们之前所学的 c&#xff0c;java都为面向对象编程语言&#xff0c;这里给大家拓展一下&#xff0c;…

getaddrinfo调用crash 的debug过程

前两天&#xff0c;产线报一例crash问题。拿到core文件后&#xff0c;栈展开信息&#xff1a; (gdb) bt #0 0x00007f64a3651aff in raise () from /lib64/libc.so.6 #1 0x00007f64a3624ea5 in abort () from /lib64/libc.so.6 #2 0x00007f64a3694097 in __libc_message () …