vue实现多个按钮只选中一个

当有多个按钮,只有一个按钮是选中状态,这时候就可以,先看一下实现效果图:

 

 看代码:

<template>
  <div class="box">
    <div class="category-scope">
      <div
        :class="['cate-item', { current: selectedItem === '' }]"
        @click="selectCategory('')"
      >
        全部
      </div>
      <div
        :class="['cate-item', { current: selectedItem === category }]"
        v-for="(category, index) in list"
        :key="index"
        @click="selectCategory(category)"
      >
        {{ category }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ['哈哈哈', '嘻嘻嘻', '嘿嘿嘿'],
        selectedItem: '',
      }
    },
    methods: {
      selectCategory(item) {
        this.selectedItem = item
        console.log('在当前函数里面可以操作数据======', item)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .box {
    width: 400px;
    margin: auto;
    margin-top: 100px;
  }
  .category-scope {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    .cate-item {
      width: 30%;
      height: 35px;
      background: #dbd8d8;
      border-radius: 4px;
      margin-right: 5%;
      margin-bottom: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &.current {
        background-color: #377eea;
        color: #ffffff;
      }
    }
    .cate-item:nth-child(3n + 3) {
      margin-right: 0;
    }
  }
</style>

完成!!