vue循环数组改变点击文字的颜色

最新推荐文章于 2023-09-03 20:56:10 发布

换日线°

最新推荐文章于 2023-09-03 20:56:10 发布

阅读量1.5k

点赞数 2

分类专栏： VUE 文章标签： vue循环数组改变点击文字的颜色

本文链接：https://blog.csdn.net/qq_43764578/article/details/102501359

版权

VUE 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

vue循环数组改变点击文字的颜色

效果图如下所示
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			.red{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in username" @click="bution(index)" :class="index == colin?'red':''">{{index}}.{{item}}</li>
			</ul>
		</div>
		
		 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	const obj = {
				username:['张三','李四','王五','二麻子'],
				colin:-1,
			}
			const app = new Vue({
				el:'#app',
				data:obj,
				methods:{
					bution:function(e){
						this.colin = e
					}
				}
			})
		 </script>
	</body>
</html>

有什么问题欢迎评论留言，我会及时回复你的

换日线°

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue循环数组改变点击文字的颜色

vue循环数组改变点击文字的颜色效果图如下所示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ list-style: none; ...
复制链接

扫一扫

专栏目录