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

最新推荐文章于 2023-11-08 09:07:31 发布

芒果沙冰哟

最新推荐文章于 2023-11-08 09:07:31 发布

阅读量1.4k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_61476911/article/details/127402820

版权

这篇博客展示了如何使用Vue.js实现一个分类按钮组，其中一个按钮保持选中状态。通过绑定:class和@click事件，动态改变selectedItem的值，实现按钮背景颜色的变化。代码示例中，当点击按钮时，对应的category值会被设置为selectedItem，从而更新样式。

摘要由CSDN通过智能技术生成

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

看代码:

<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>

完成!!