vue点击当前按钮变色

最新推荐文章于 2024-01-18 18:27:49 发布

原创最新推荐文章于 2024-01-18 18:27:49 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中实现按钮被点击时改变颜色的效果，通过绑定点击事件和CSS样式实现动态交互。

<template>
  <div>
    <div>
      <ul class="year-wrap">
        <li v-for="item,index in lis" :key="index"><Button :class="{ active:changeBackground == index }" @click="changeItem(item.id)">{{item.title}}</Button> </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lis:[
        { title:'2021全年',id:'0' },
        { title:'2020全年',id:'1' },
        { title:'2020年至今',id:'2' },
        { title:'2019年至今',id:'3' },
      ],
      changeBackground:0
    }
  },
  mounted() {

  },
  methods:{
    changeItem(index) {
      this.changeBackground = index
    }
  }
}
</script>

<style lang="less" scoped>
.year-wrap {
  width: 96%;
  height: 60px;
  background: #fff;
  margin: auto;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.active {
  background: #19BE6B;
  color: #fff;
}
</style>