vue实现单选取消和多选双击取消效果

单击选中和取消

         我们在日常项目中经常需要实现，点击一个导航栏高亮，或者点击显示遮罩层展示信息。先来看一下效果。

        我这里显示的是一个遮罩层，图中点击显示的数字是vue循环中数组的下标。不废话了，上源码。

<template>
  <div class="hello">
    <ul>
    	<li v-for="(item,index) of list"
      :key = index
      @click="maskshow(index)"
      >
        <div class="content" :style="{'backgroundColor':item.backgroundcolor}">

        </div>
        <div class="mask" v-show="show === index">
          {{index}}
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      show:-1,
      list:[{
        backgroundcolor:"#FFB200",
        price:1
      },{
        backgroundcolor:"#B11EE0",
        price:2
      },{
         backgroundcolor:"#FFA4CF",
         price:3
      }]
    }
  },
  methods:{
   maskshow:function(index){
     let that = this;
     if(that.show === index)
     {
       this.show = -1
     }
     else{
       this.show = index
     }
   }
  }
}
</script>

<style scoped>
  @import url("../assets/reset.css");
  ul li{
    float: left;
    position: relative;
  }
  .content{
    width: 100px;
    height: 100px;
    margin: 5px;
    box-sizing: border-box;
  }
  .mask{
    position: absolute;
    left: 5px;
    top: 5px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #FFFFFF;
    background:linear-gradient(rgba(36,13,103,1),rgba(70,29,165,0.9));
  }
</style>

如果需要一个默认选中，在data里面把show的值，改为默认选中数组元素的的下标就可以了。这个实现逻辑大家只需要跟着代码走一遍就看懂了，我就不在这里废话啦。

多选效果

        同样的逻辑稍加修改，我们就可以实现多选，双击取消。这种效果也比较常见，例如CSDN选择频道

再例如个性标签

上源码

<template>
  <div class="hello">
    <div>
      选中了{{listindex.length}}个
    </div>
    <div>
      总价：{{sumprice}}
    </div>
    <ul>
    	<li v-for="(item,index) of list"
      :key = index
      @click="changemask(index)"
      >
        <div class="content" :style="{'backgroundColor':item.backgroundcolor}">

        </div>
        <div class="mask" v-show="listindex.indexOf(index)>-1">
          {{item.price}}元
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
export default {
  name: 'duoxuan',
  data () {
    return {
      sumprice:0,
      num:0,
      listindex:[],
      list:[{
        backgroundcolor:"#FFB200",
        price:1
      },{
        backgroundcolor:"#B11EE0",
        price:5
      },{
         backgroundcolor:"#FFA4CF",
         price:8
      }]
    }
  },
  methods:{
 changemask(index){
   let arrkey = this.listindex.indexOf(index);
   if(arrkey>-1){
     this.listindex.splice(arrkey,1)
   }else{
     this.listindex.push(index)
   }

   this.sumprice = 0
   for(var item of this.listindex)
   {
     this.sumprice += this.list[item].price
   }


 }
  }
}
</script>

<style scoped>
  @import url("../assets/reset.css");
  ul li{
    float: left;
    position: relative;
  }
  .content{
    width: 100px;
    height: 100px;
    margin: 5px;
    box-sizing: border-box;
  }
  .mask{
    position: absolute;
    left: 5px;
    top: 5px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #FFFFFF;
    background:linear-gradient(rgba(36,13,103,1),rgba(70,29,165,0.9));
  }
</style>

在这里我们用一个空的数组来存li元素的下标，选中li元素时，把li元素的下标存进数组中。再次点击时，就将数组中对应的当前下标删除 。这个新建的数组元素与选中的li元素下标相等，我们就可以方便的计算出，总商品价格。数组的长度就是选中的 个数。
来看下效果图：

码字不易，点个赞吧