Vue动态给一个元素添加类名，兄弟元素移除类名

最新推荐文章于 2024-06-26 16:58:12 发布

原创最新推荐文章于 2024-06-26 16:58:12 发布 · 6.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #class

网络学习日志同时被 3 个专栏收录

111 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

vue

23 篇文章

订阅专栏

本文介绍如何在Vue中使用v-bind:class动态地为元素添加和移除类名，实现列表项点击高亮效果。通过@click事件监听和data属性控制当前活动项，使选中的列表项样式变化。

Vue动态给一个元素添加类名，兄弟元素移除类名

直接上代码,亲测可用

<template>
 	<div>
		<ul>
			<li  v-for="(item,index) in list" @click="do(item,index)" ：class="{'color':index==current}">{{item.name}}</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name:"ul",
		data(){
			return{
				current:0,
				list:[
					{name:"zhangsan",age:14},	
					{name:"zhangsan",age:14},	
					{name:"zhangsan",age:14},	
					{name:"zhangsan",age:14},	
				]	
			}
		},
		methods:{
			do(item,index){
				//item,进行相关操作
				this.current = index
			}
		}
		
	}
</script>
<style scope>
.color{color:#fff}
</style>