多选筛选按钮（全部）

最新推荐文章于 2025-05-12 12:00:00 发布

原创最新推荐文章于 2025-05-12 12:00:00 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何在Vue.js应用程序中创建一个多选筛选组件，允许用户从多个选项中选择，以便过滤和显示相关数据。内容包括组件设计、事件处理和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div class="box">
      <ul>
        <li
          class="all"
          @click="arrayAll()"
          :class="listAll.length > 0 ? 'style' : 'hstyle'"
        >
          全部
        </li>
        <li
          v-for="(item, index) in list"
          :key="index"
          class="box2"
          @click="clickList(item.id)"
        >
          <div class="names" :class="{ active: listAll.includes(item.id) }">
            {{ item.name }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      list: [
        { name: '侵权', id: 1 },
        { name: '阿萨', id: 2 },
        { name: '俩年', id: 3 },
        { name: '屏幕', id: 4 },
        { name: '请问', id: 5 },
        { name: '明年', id: 6 },
        { name: '你还', id: 7 },
        { name: '碍难', id: 8 },
        { name: '里面', id: 9 }
      ],
      listAll: []
    }
  },
  methods: {
    clickList (id) {
      const ids = this.listAll.indexOf(id)
      if (ids !== -1) {
        this.listAll.splice(ids, 1)
      } else {
        this.listAll.push(id)
      }
    },
    arrayAll () {
      let add = this.listAll
      if (add.length > 0) {
        add = []
      }
      this.listAll = add
      console.log(this.listAll)
    }
  }
}
</script>

<style>
li {
  list-style: none;
}
ul {
  display: flex;
}
.box {
  width: 100%;
  height: 500px;
  margin: 0 auto;
}
.box2 {
  margin-left: 50px;
  width: 140px;
  height: 30px;
}
.names {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  background-color: rgb(219, 212, 212);
  cursor: pointer;
}
.all {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  background-color: rgb(219, 212, 212);
  cursor: pointer;
}
.active {
  background-color: #005ad5;
  color: #fff;
}
.hstyle {
  background-color: #005ad5;
  color: #fff;
}
.style {
  background-color: #f7f7f7;
  color: #adadad;
}
</style>