vue 单选和多选

效果图：

 

 

<template>
  <div>
    <!-- 单选 -->
    <!-- <ul class="box">
      <li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)" :key="index">{{c}}</li>
    </ul> -->

    <!-- 多选 -->
    <ul class="box">
      <li v-for="c,index of cities" :class="{checked:chechks.includes(index)}" @click="chechkList(index)" :key="index">{{c}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cities : ["上海","北京","广州","重庆","西安"],
        n : 0,
        chechks: []
      }
    },
    methods :{
        changeList(index){
            this.n = index;
        },
        // 首先判断该值是否在chechks, 如果不在则添加，如果在则删除
        chechkList(index) {
          if(this.chechks.includes(index)) {
            this.arr=this.arr.filter(function (ele){return ele != index;});  // 也可以过滤掉当前索引
          }else {
            this.chechks.push(index)
          }
        },
    }
  }
</script>

<style scoped>

body{margin:0;}
ul{
    padding:0; list-style:none; 
    margin:150px 150px;
}
li{
    width:80px; height:50px; 
    display:inline-block;
    border-radius:8px; border:1px #000 solid;
    text-align:center; line-height:50px;
    cursor:pointer; 
    transition:all 0.3s linear;
    margin-left:5px;
    color: red;
}
li:hover{
    background-color:#0CF; color:#fff; 
    border:1px #fff solid;
}    
li.checked{
    background-color:#0CF; color:#fff; 
    border:1px #fff solid;
}

</style>