vue实现点击选中高亮效果

vue最简单的实现点击选中方式，话不多说，附上代码和效果图<div class="listCss" v-for="(item,index) in listArr" :key="index"@click="activeVar=index" :class="{'activeCss':activeVar==index}">{{item}}</div><script>e

闰土与猹的故事

15158人浏览 · 2021-11-09 09:53:10

闰土与猹的故事 · 2021-11-09 09:53:10 发布

vue最简单的实现点击选中方式，话不多说，先看效果图，顺带附上代码

<template>
 <div>
   <div class="listCss" v-for="(item,index) in listArr" :key="index" 
   :class="{'activeCss':activeVar==index}" @click="activeFun(item,index)">
      {{item}}
   </div>
 </div>
</template>


<script>
export default {
  data() {
    return {
    // 默认为0(如不需要默认可设为null)，点击时将索引赋值给active，从而实现点击选中效果
     activeVar:0,  
    //  循环列表
     listArr:["按钮1","按钮2","按钮3","按钮4","按钮5"]
    };
  },
  methods:{
   activeFun(item,index){
        // item 为被选中的元素体
        this.activeVar=index
   }
  }
};
</script>

<style>
// 默认样式
.listCss{
  cursor: pointer;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #ccc;
  float: left;
  margin-right: 10px;
}
// 选中时的样式 (继承上方默认样式)
.activeCss{
 background: skyblue;
}
</style>