Vue 实现单选和多选

日常工作中，UI 库中 单选/多选 组件并不一定非常符合业务需求。这时候，不妨自己动手搞一个。

单选

效果

思路

选中标识值与对象标识匹配时（本例使用索引），给所在标签添加选中样式；点击标签时，更改选中标识值。

代码

<template>
  <ul>
    <li 
      v-for="(city, index) in cityList"
      :key="index"
      :class="{ checked: index === checkedIndex }" 
      @click="changChecked(index)"
    >
    {{ city }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      checkedIndex: 0,
      cityList: ['上海', '北京', '广州', '西安']
    }
  },
  methods: {
    changChecked (index) {
      this.checkedIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  padding: 0;

  li {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 8px;
    margin-left: 5px;
    width: 80px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    transition: all 0.3s linear;

    &.checked {
      border: 1px solid #fff;
      color: #fff;
      background-color: #0cf;
    }

    &:hover {
      border: 1px solid #fff;
      color: #fff;
      background-color: #0cf;
    }
  }
}
</style>

多选（2 种方法）

效果

方法一

思路

选中标识值为数组，标识值包含当前对像标识时（本例使用索引），给所在标签添加选中样式；点击标签时，若不包含选中标识，添加到数组；否则从数组从移除。

代码

<template>
  <ul>
    <li
      v-for="(city, index) in cityList" 
      :key="index"
      :class="{ checked: checkedList.includes(index) }"
      @click="changChecked(index)"
    >
      {{ city }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Home2',
  data () {
    return {
      checkedList: [],
      cityList: ['上海', '北京', '广州', '西安'],
    }
  },
  methods: {
    changChecked (index) {
      if (this.checkedList.includes(index)) {
        this.checkedList = this.checkedList.filter(item => {
          return item !== index
        })
      } else {
        this.checkedList.push(index)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  padding: 0; 
  list-style: none;

  li {
    display: inline-block;
    margin-left: 5px;
    width: 50px; 
    height: 30px; 
    text-align: center; 
    line-height: 30px;
    cursor: pointer;

    &::before { 
      display: inline-block; 
      margin-right: 2px; 
      border: 1px solid #000; 
      width: 10px; 
      height: 10px; 
      line-height: 10px; 
      content: ""; 
      transition: all 0.3s linear;
    }    

    &.checked { 
      color: #0CF;
    }

    &.checked::before { 
      border: 1px solid #fff;
      background-color: #0CF; 
    }
  }
}
</style>

方法二

思路

通过引入辅助变量实现。每个对象添加一个是否选中标识，若标识为 true，给所在标签添加选中样式；点击标签时，取反所在对象标识。

代码

<template>
  <ul>
    <li
      v-for="(item, index) in cityList" 
      :key="index"
      :class="{ checked: item.checked }"
      @click="changChecked(index)"
    >
      {{ item.city }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Home3',
  data () {
    return {
      cityList: [
        {
          city: '上海',
          checked: false
        },
        {
          city: '北京',
          checked: false
        },
        {
          city: '广州',
          checked: false
        },
        {
          city: '西安',
          checked: false
        }
      ]
    }
  },
  methods: {
    changChecked (index) {
      this.cityList[index].checked = !this.cityList[index].checked
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  padding: 0; 
  list-style: none;

  li {
    display: inline-block;
    margin-left: 5px;
    width: 50px; 
    height: 30px; 
    text-align: center; 
    line-height: 30px;
    cursor: pointer;

    &::before { 
      display: inline-block; 
      margin-right: 2px; 
      border: 1px solid #000; 
      width: 10px; 
      height: 10px; 
      line-height: 10px; 
      content: ""; 
      transition: all 0.3s linear;
    }    

    &.checked { 
      color: #0CF;
    }

    &.checked::before { 
      border: 1px solid #fff;
      background-color: #0CF; 
    }
  }
}
</style>