Vue.js中的交互式样式:鼠标悬停与点击选中响应

news2025/1/15 14:57:43

        在现代Web开发中,用户体验是至关重要的。Vue.js作为一个渐进式JavaScript框架,它提供了一种简洁而高效的方式来构建用户界面。本文将介绍如何在Vue.js中实现两种常见的交互效果:鼠标悬停响应和点击选中响应。

一、鼠标悬停响应右边显示

在Vue.js中,我们可以通过CSS来实现鼠标悬停时显示额外内容的效果。以下是一个简单的示例,展示了如何在鼠标悬停时在右侧显示内容。

 HTML模板

<template>
	<div class="cssContent" v-for="(item, index) in tpcPassList" :key="index">
		<div class="cssContent-left">{{ item.name }}</div>
		<div class="cssContent-right">右边显示</div>
	</div>
</template>

JavaScript

<script>
export default {
	data() {
        return {
            tpcPassList: [
                { name: "leftContent" },
                { name: "leftContent" },
                { name: "leftContent" },
                { name: "leftContent" },
                { name: "leftContent" },
                { name: "leftContent" }
            ],
        }
    },
}
</script>

CSS样式

<style scoped lang="scss">
.cssContent {
	display: flex;
	align-items: center;
	width: 100%;
	.cssContent-left {
		width: 80%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
	}
}

/* 定义悬停时的背景颜色 */
.cssContent:hover {
	background-color: #f0f0f0; /* 悬停时的背景颜色 */
}

/* 定义非悬停时.right类的隐藏 */
.cssContent .cssContent-right {
	display: none;
}

/* 定义悬停时.right类的显示 */
.cssContent:hover .cssContent-right {
	display: block; /* 或者使用其他值,如 flex, inline-block 等 */
	font-weight: 600;
}
</style>

在这个例子中,.cssContent 类定义了基本的布局和样式。当鼠标悬停在.cssContent元素上时,.cssContent-right 元素会显示出来,这是因为:hover伪类改变了它的display属性。

二、点击选中响应样式改变

点击选中响应是另一种常见的交互效果,用户可以通过点击来选择一个元素,并改变其样式。以下是如何在Vue.js中实现这一效果的示例。

HTML模板

<template>
	<div 
		class="leftFor" 
		v-for="(item, index) in classifyList" 
		:key="index"
		@click="selectItem(index)"
		:class="{ selected: selectedIndex === index }"
	>
		<div class="leftItem">{{ item.name }}</div>
	</div>
</template>

JavaScript

<script>
export default {
	data() {
        return {
            selectedIndex: null,
            classifyList: [
                { name: "分类1" },
                { name: "分类2" },
                { name: "分类3" },
                { name: "分类4" },
                { name: "分类5" },
                { name: "分类6" }
            ],
        }
    },
	methods: {
        selectItem(index) {
            this.selectedIndex = index; // 更新选中的 index
        },
    }
}
</script>

CSS样式

<style scoped lang="scss">
.leftFor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	.leftItem {
		font-weight: 600;
	}
}

.leftFor.selected {
	background-color: red; /* 选中项的样式 */
}
</style>

在这个例子中,我们使用了Vue.js的@click指令来监听点击事件,并更新selectedIndex数据属性。:class绑定用于根据selectedIndex的值动态添加selected类,从而改变元素的样式。

结论

        通过这两个示例,我们可以看到Vue.js如何轻松地实现鼠标悬停和点击选中的交互效果。这些效果不仅增强了用户的交互体验,而且通过Vue.js的响应式数据绑定和CSS的动态样式,使得实现这些效果变得简单而直观。希望这篇文章能帮助你在构建Web应用时,为用户提供更加丰富和响应式的界面。

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

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

相关文章

0017. shell命令--tac

目录 17. shell命令--tac 功能说明 语法格式 选项说明 实践操作 注意事项 17. shell命令--tac 功能说明 Linux 的 tac 命令用于按行反向输出文件内容&#xff0c;与 cat 命令的输出顺序相反。非常有趣&#xff0c;好记。也就是说&#xff0c;当我们使用tac命令查看文件内…

Zero to JupyterHub with Kubernetes上篇 - Kubernetes 离线二进制部署

前言&#xff1a; 纯个人记录使用。 搭建 Zero to JupyterHub with Kubernetes 上篇 - Kubernetes 离线二进制部署。搭建 Zero to JupyterHub with Kubernetes 中篇 - Kubernetes 常规使用记录。搭建 Zero to JupyterHub with Kubernetes 下篇 - Jupyterhub on k8s。 k8s二进…

《Vue零基础入门教程》第十四课:列表渲染

往期内容 《Vue零基础入门教程》第六课&#xff1a;基本选项 《Vue零基础入门教程》第八课&#xff1a;模板语法 《Vue零基础入门教程》第九课&#xff1a;插值语法细节 《Vue零基础入门教程》第十课&#xff1a;属性绑定指令 《Vue零基础入门教程》第十一课&#xff1a;事…

1.1 数据结构的基本概念

1.1.1 基本概念和术语 一、数据、数据对象、数据元素和数据项的概念和关系 数据&#xff1a;是客观事物的符号表示&#xff0c;是所有能输入到计算机中并被计算机程序处理的符号的总称。 数据是计算机程序加工的原料。 数据对象&#xff1a;是具有相同性质的数据元素的集合&…

mmsegmentation自己的数据集

我最大的问题就是没安装官方给定的mask转换格式来转换 这种带白色的不行哦&#xff01; 黑色的可以&#xff0c;其实mask*50就可以看清楚标记的轮廓之类的。 数据集格式转换按照A,B,C代码直接转换&#xff1a;https://github.com/TommyZihao/Label2Everything/tree/main/lab…

分治算法中的主定理及其应用

引言 学习递归算法的时候&#xff0c;找到了用来计算算法复杂度的主定理。问大语言模型&#xff0c;发现回答的主定理描述有所不同。本文比较了两个不同版本中表述的差异。并给出一些例子用来计算分治递归类算法的复杂度。 主定理的不同版本 版本1 在《算法导论》第三版第四…

【kafka03】消息队列与微服务之Kafka 读写数据

Kafka 读写数据 参考文档 Apache Kafka 常见命令 kafka-topics.sh #消息的管理命令 kafka-console-producer.sh #生产者的模拟命令 kafka-console-consumer.sh #消费者的模拟命令 创建 Topic 创建topic名为 chen&#xff0c;partitions(分区)为3&#xff0…

LuaForWindows_v5.1.5-52.exe

Releases rjpcomputing/luaforwindows GitHub #lua C:\Users\Administrator\Desktop\test.lua print("Hello lua&#xff01;") print("ZengWenFeng 13805029595")

软件无线电(SDR)的架构及相关术语

今天简要介绍实现无线电系统调制和解调的主要方法&#xff0c;这在软件定义无线电(SDR)的背景下很重要。 外差和超外差 无线电发射机有两种主要架构——一种是从基带频率直接调制到射频频率&#xff08;称为外差&#xff09;&#xff0c;而第二种超外差是通过两个调制阶段来实…

【Electron学习笔记(四)】进程通信(IPC)

进程通信&#xff08;IPC&#xff09; 进程通信&#xff08;IPC&#xff09;前言正文1、渲染进程→主进程&#xff08;单向&#xff09;2、渲染进程⇌主进程&#xff08;双向&#xff09;3、主进程→渲染进程 进程通信&#xff08;IPC&#xff09; 前言 在Electron框架中&…

Power BI - Connect to SharePoint online list with Image column

1.简单介绍 当前SharePoint online list有modern和classic两种模式&#xff0c;现在使用modern模式的比较多。list中有Image类型的列&#xff0c;Power BI如何连接到SharePoint list并显示image呢 note, SharePoint list中的Image列&#xff0c;Lookup列&#xff0c;People列…

电机控制理论基础及其应用

电机控制理论是电气工程和自动化领域中的一个重要分支&#xff0c;它主要研究如何有效地控制电机的运行状态&#xff0c;包括速度、位置、扭矩等&#xff0c;以满足各种应用需求。电机控制理论的基础知识涵盖了电机的工作原理、数学模型、控制策略以及实现技术等方面。下面是一…

二十一、QT C++

1.1QT介绍 1.1.1 QT简介 Qt 是一个跨平台的应用程序和用户界面框架&#xff0c;用于开发图形用户界面&#xff08;GUI&#xff09;应用程序以及命令行工具。它最初由挪威的 Trolltech &#xff08;奇趣科技&#xff09;公司开发&#xff0c;现在由 Qt Company 维护&#xff…

基于Java Springboot蛋糕订购小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 微信…

Kubernetes 01

MESOS&#xff1a;APACHE 分布式资源管理框架 2019-5 Twitter退出&#xff0c;转向使用Kubernetes Docker Swarm 与Docker绑定&#xff0c;只对Docker的资源管理框架&#xff0c;阿里云默认Kubernetes Kubernetes&#xff1a;Google 10年的容器化基础框架&#xff0c;borg…

7. 现代卷积神经网络

文章目录 7.1. 深度卷积神经网络&#xff08;AlexNet&#xff09;7.2. 使用块的网络&#xff08;VGG&#xff09;7.3. 网络中的网络&#xff08;NiN&#xff09;7.4. 含并行连结的网络&#xff08;GoogLeNet&#xff09;7.5. 批量规范化7.5.1. 训练深层网络7.5.2. 批量规范化层…

芯片测试-射频中的单位

射频中的单位 &#x1f4a2;dB&#xff0c;dBc&#x1f4a2;&#x1f4a2;dB&#x1f4a2;&#x1f4a2;dBc&#x1f4a2;&#x1f4a2;3dB和0dB&#x1f4a2; &#x1f4a2;dBm和dBw&#x1f4a2;&#x1f4a2;dBuV&#xff0c;dBmV和dBV&#x1f4a2;&#x1f4a2;dBuV&#…

【C++】数字位数提取:从个位到十位的深入分析与理论拓展

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;第一题&#xff1a;提取个位数解法代码解法分析代码优化拓展思考&#xff1a;取模运算的普适性 &#x1f4af;第二题&#xff1a;提取十位数题目解读与思路分析方法一&…

opengl 三角形

最后效果&#xff1a; OpenGL version: 4.1 Metal 不知道为啥必须使用VAO 才行。 #include <glad/glad.h> #include <GLFW/glfw3.h>#include <iostream> #include <vector>void framebuffer_size_callback(GLFWwindow *window, int width, int heigh…

如何使用Postman优雅地进行接口自动加密与解密

引言 在上一篇文章中&#xff0c;分享了 Requests 自动加解密的方法&#xff0c;本篇文章分享一下更加方便的调试某个服务端接口。 Postman Postman 这个工具后端小伙伴应该相当熟悉了&#xff0c;一般情况下我们会在开发和逆向过程中使用它来快速向接口发送请求&#xff0c;…