vue 多选 用es6数组 filter方法实现

639 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

定义和用法

filter用于对数组进行过滤
它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
该方法通常用于缩小在被选元素组合中搜索元素的范围。

注意:filter()不会对空数组进行检测、不会改变原始数组
提示: filter() 方法是与 not() 方法相对的。

语法

$(*selector*).filter(*criteria,* function *(index)* )

示例:

<!DOCTYPE html>
<html>
<head>
<title>多选</title>
<style type="text/css">
  .spans{
    display: inline-block;
    padding:4px 20px;
    border-radius: 20px;
    border:1px solid #e8e8e8;
    margin-right:10px;
    text-align: center;
  }
  .checked{
    background-color: pink;
  }
  .unchecked{
    border:1px solid #e8e8e8;
  }
</style>
</head>
<script src="./vue.js"></script>
<body>
 <div id="warning">
  <h4>谁才是你的最最?</h4>
  <div>
    <span :ref="index+'text'" class="spans" :class="checkeds.indexOf(item)!=-1?'checked':'unchecked'" v-for="(item,index) in cards" :key="index" @click="chooseLoves(item,index)">{{item}}</span>
  </div>

</div>
   <script src="./vue.js"></script>
   <script>
       
       var vm = new Vue({
           el: '#warning',
           data:{
        cards:['阳光','帅气','漂亮','聪明','幽默'],
        checkeds:[], //选中数组
           },
      methods:{
        chooseLoves(item,index){
          if(this.checkeds.indexOf(item)!=-1){//证明是已经选中状态 checked
            this.checkeds = this.checkeds.filter(function(ele){
                 return ele!=item
            })
          }else{//未选中状态
            this.checkeds.push(item)
          }
        },
      },
       })
   </script>


es filter数组过滤使用方法:

1.创建一个数组,判断数组中是否存在某个值。

   var newarr = [
      { num: 1, val: 'ceshi', flag: 'aa' },
      { num: 2, val: 'ceshi2', flag: 'aa2'  }
    ]
    console.log(newarr.filter(item => item.num===2 ))

2.也可以通过上面方法过滤掉num为2的留下num为1的

  var newarr = [
    { num: 1, val: 'ceshi', flag: 'aa' },
    { num: 2, val: 'ceshi2', flag: 'aa2'  }
  ]
  console.log(newarr.filter(item => item.num!=2 ))

3.去掉空数组空字符串、undefined、null

  var arr = ['1','2',undefined, '3.jpg',undefined]
  var newArr = arr.filter(item => item)
  console.log(newArr)

  var arr = ['1','2',null, '3.jpg',null]
  var newArr = arr.filter(item => item)
  console.log(newArr)

  >//空字符串里面不能包含空格
  var arr = ['1','2','', '3.jpg','']
  var newArr = arr.filter(item => item)
  console.log(newArr)

4.数组去重

   var chognfu = [1,2,4,1,10,4,3,21]
      var self = [] //去重之后数组
      chognfu.filter((item)=>{
        if(self.indexOf(item)==-1){
          self.push(item)
        }
      })
      console.log(self,'self')