vue中点击li列表，点击谁，谁变色，如何实现？

浮生666

已于 2022-03-14 10:01:51 修改

阅读量2.9k

点赞数 9

分类专栏： vue 文章标签： vue.js html css

于 2020-11-05 17:41:40 首次发布

本文链接：https://blog.csdn.net/qq_43069664/article/details/109517008

版权

vue 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

按钮样式比没写，根据自己的需求自己修改就行，示例代码如下，拿走即用：

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>去掉滚动条</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
		.active{
			color: red;
		}
    </style>
</head>

<body>
	<div id="app">
	  <div class="box">
		  <div v-for="(item,index) in arr" :key="index" @click="tap(index)" :class="activeIndex==index ? 'active' : ''">{{item.name}}</div>
	  </div>
	</div>
</body>

<script type="text/javascript">
	var app = new Vue({
	  el: '#app',
	  data: {
		arr:[
			{
				name:"按钮A"
			},
			{
				name:"按钮B"
			}
		],
		activeIndex:"-1" //如果想要设置默认选中，activeIndex值和索引值对应即可；例如，activeIndex等于0，默认选中就是按钮A
	  },
	  methods:{
		  tap(index){
			  this.activeIndex=index;
		  }
	  }
	})
</script>
<html>