vue 实现单选/多选效果

最新推荐文章于 2024-07-19 11:16:36 发布

sunlizhen

最新推荐文章于 2024-07-19 11:16:36 发布

阅读量2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sunlizhen/article/details/96306257

版权

本文探讨了如何在Vue中实现单选和多选效果。利用includes()方法进行元素判断，通过filter()方法过滤并处理数组元素，创建符合需求的新数组。

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

Vue的多选效果
includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效

filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组

<template>
  <div class="content">
    <div ref="conCon">
      <p>标题一</p>
      <button @click="Change(index)" v-for="(item,index) in content1" :key="'info-'+ index" :class ="{'info':info,'active': classItem.includes(index)}" :value="item">{
  {item}}</button>
    </div>
    <div ref="conCon1">
      <p>标题二</p>
      <button @click="Change1(index)" v-for="(item,index) in content2" :key="'info1-'+ index" :class ="{'info':info,'active': classItem1.includes(index)}" :value=