码迷,mamicode.com
首页 > 其他好文 > 详细

vue 选择之单选,多选,反选,全选,反选

时间:2019-11-27 16:27:27      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:判断   nbsp   item   div   lin   for   word   class   cli   

1、单选

当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选。

<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?‘active‘:‘‘" @click="select(index)">{{item}}</li>

首选定义一个selectedNum,当我们点击item时,便把这个selectedNum更改为我们所点击的item的index,然后每个item上加入判断selectedNum是不是等于自己,如果等于则选中。

代码如下:

data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
    };
  },
methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
  }

  

 

2、多选

 

3、反选

4、全选

5、全不选

vue 选择之单选,多选,反选,全选,反选

标签:判断   nbsp   item   div   lin   for   word   class   cli   

原文地址:https://www.cnblogs.com/ning123/p/11942942.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!