多选筛选按钮(全部)

本文介绍如何在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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值