Vue.js实例01—实现点击列表变换样式

最新推荐文章于 2024-08-15 13:48:12 发布

LOVE_SCENARIO

最新推荐文章于 2024-08-15 13:48:12 发布

阅读量1.5k

点赞数 5

分类专栏： Vue.js实例文章标签： vue.js html5 css3 列表

本文链接：https://blog.csdn.net/qq_41905795/article/details/113706754

版权

本文介绍如何使用Vue.js实现点击列表项时，选中项样式改变，包括变为蓝色、加粗和字体增大。默认选中第一个列表项，后续点击随机选择其他项并恢复未选中项的原始样式。文章通过两种方法详细讲解了实现过程。

摘要由CSDN通过智能技术生成

一、需求

默认样式为黑色字体，变换后的样式为蓝色字体、加粗、字体变大
开始时默认选中列表的第一项
之后随机点击列表的某一项时，该列表项就变换样式，其余的恢复初始状态

二、效果图

在这里插入图片描述

三、源代码

1.第一种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表点击变色demo1</title>
		<!-- 引入项目里的Vue.js文件 -->
		<script src="../../../vue.js"></script>
		<!-- 变换后的样式 -->
		<style>
			.active{
    
				color: blue;
				font-size: 20px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id