vue 实现多选和单选

￡神魔★判官ぃ 2022-11-29 12:53 205阅读 0赞

### 这里是多选： ###

![20200821101725562.png][]

上个小小的效果图，然后具体实现看代码

**template**

**style**

/* 这是没选中的样式 */
    .choose {
      border: solid #D3D3D3 2rpx;
      border-radius: 50%;
      width: 20rpx;
      height: 20rpx;
    }
    
    /* 这是选中的样式 */
    .green {
      background-color: #4CD964;
      border: solid #4CD964 2rpx;
    }

**data**

list: [
      {
        name: '张三'
      },
      {
    	name: '张三'
      },
      {
    	name: '张三'
      }
    ],
    arr: [],

**methods**

choose: function(i) {
      console.log(i);
      if (this.arr.includes(i)) {
        //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
        //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
        this.arr = this.arr.filter(function(ele) {
          return ele != i;
        });
      } else {
        this.arr.push(i);
      }
    }

tip：

这里面有两个es6的语法，**includes**  （[这里是别的大佬写的详解，可以看一下][Link 1]）和 **filter** （[这里是别的大佬写的详解，可以看一下][Link 2]）

### 现在说一下单选： ###

![20200916175305730.png][]（这是单选的效果图）

**view**

**style**

.chooseOutType {
      color: red;
      font-weight: bold;
    }

**data**

type: [{
    	id: 0,
    	name: '步行'
    }, {
    	id: 0,
    	name: '骑车'
    }, {
    	id: 0,
    	name: '公交（地铁，高铁，大巴）'
    }, {
    	id: 0,
    	name: '私家车'
    }, {
    	id: 0,
    	name: '飞机'
    }, {
    	id: 0,
    	name: '轮渡'
    }, {
    	id: 0,
    	name: '更多'
    }],
    n:100,

**methods**

chooseOut: function(e, index) {
      console.log(index, '选择出行方式', e);
      this.n = index
    },

[20200821101725562.png]: /images/20221124/090f75da29c14e88b888b6c6619f435b.png
[Link 1]: https://www.cnblogs.com/kongxianghai/p/7560343.html
[Link 2]: https://www.cnblogs.com/lizhao123/p/9528124.html
[20200916175305730.png]: /images/20221124/4f81e24363dd434eb9d8d5f50ee25c54.png