vue中单选、多选、全选小功能

_!Nic_

已于 2023-05-10 09:16:13 修改

阅读量1.5k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-05-10 09:14:44 首次发布

本文链接：https://blog.youkuaiyun.com/Yijing_Wei/article/details/130580332

版权

文章展示了如何在Vue中实现单选、多选和全选功能，通过数据绑定和数组操作实现选中状态的切换。在多选全选功能中，使用了includes方法检查和修改选中项，并提供了全选按钮的逻辑，注意到了直接赋值可能导致的引用问题，建议使用Object.assign()避免这种问题。

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

单选多选全选是我们开发中经常会用到的功能，刚开始接触vue的时候也可以通过单选多选小功能的实现来更好的了解 vue 带来的方便便捷

<template>
   <view class="content">
       
       <view class="onlybtn">
           <text v-for="(item,index) in onlyList" :key="index" :class="ind==index?'btn active':'btn'"
               @click="changeonly(index)">{{item}}</text>
       </view>
       
       <view class="morebtn">
           <text v-for="(item,index) in moreList" :key="index" :class="changeMore.includes(item)?'btn active':'btn'"
               @click="changemore(item)">{{item}}</text>
       </view>
       <view>
           <view class="allchange" @click="allchange">
               <text :class="changeMore.length==moreList.length?'active circle':'circle'"></text>
               <text>全选</text>
           </view>
           <text>未全选中状态下，点击全选多选中的按钮全部选中再次点击取消</text>
       </view>
   </view>
</template>
<script>
   export default {
       data() {
           return {
               // 单选
               onlyList: ['租房', '买房', '卖房'],
               ind: 0,
               // 多选全选
               moreList: ['出行', '医疗', '住房', '吃喝'],
               changeMore: []
           }
       },
       methods: {
           // 单选
           changeonly(ind) {
               this.ind = ind
           },
           // 多选
           changemore(item) {
               if (this.changeMore.includes(item)) {
                   this.changeMore.splice(this.changeMore.indexOf(item), 1)
               } else {
                   this.changeMore.push(item)
               }
           },
           // 全选
           allchange() {
               if (this.changeMore.length == this.moreList.length) {
                   this.changeMore = []
               } else {
this.changeMore = Object([],this.moreList)
               }
               // 开始写没多想出出现了小错误
               // if (this.changeMore.length == this.moreList.length) {
               //    this.changeMore = []
               // } else {
               //    this.changeMore = this.moreList
               // }
           }

       }
   }
</script>

<style>
   .btn {
       display: inline-block;
       margin-top: 10rpx;
       margin-left: 20rpx;
       border: 1rpx solid #ccc;
       padding: 5rpx 20rpx;
   }

   .btn.active {
       background-color: lightblue;
   }

   .allchange {
       display: flex;
       align-self: baseline;
   }

   .circle {

       display: inline-block;
       width: 30rpx;
       height: 20rpx;
       border: 1rpx solid #ccc;
       color: #fff;
       margin: 10rpx;
       border-radius: 50%;
   }

   .circle.active {
       background-color: lightblue;
   }

   button {
       margin: 20rpx;
   }
</style>