vue让只有被选中的标签变色

最新推荐文章于 2024-06-30 11:06:07 发布

lUaena

最新推荐文章于 2024-06-30 11:06:07 发布

阅读量982

点赞数

本文链接：https://blog.csdn.net/progrmmmm/article/details/121547173

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击列表，让列表变红</title>
	</head>
	<style>
		.red{
			color: red;
		}
	</style>
	<script src="../js/vue.js"></script>
	<body>
		<div id="app">
			<ul>
				<li v-for="(m,index) in movies" :class="{red:clas === index}" @click="getbb(index)" >{{m}}</li>
			</ul>
		</div>
	</body>
	<script>
		const app = new Vue({
			el:"#app",
			data:{
				movies:['软件管理','网易云音乐','飞书','腾讯会议'],
				clas:0
			},
			methods:{
				getbb(index){
					this.clas=index
				}	
			},
		})
	</script>
</html>

原理很简单，点击传参index，并且点击函数让定义的数据等于index，让被选中的那一条获得class

效果是这样的：