vue+js实现自定义单选

自定义单选按钮，更灵活的、方便的处理前端业务问题

<template>
  <div class="Radio">
    <span
      v-for="(item, index) in list"
      :key="index"
      @click="radioSelect(index)"
      :class="index === num ? 'active' : 'active2'"
    >
      {{ item.name }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      list: [
        {
          name: "单选1",
        },
        {
          name: "单选2",
        },
        {
          name: "单选3",
        },
        {
          name: "单选4",
        },
        {
          name: "单选5",
        },
        {
          name: "单选6",
        },
      ],
    };
  },
  methods: {
    radioSelect(index) {
      // 如果已经选择，点击后取消选择
      if (this.num === index) {
        this.num = null;
      } else {
        this.num = index; // 未选择点击选择
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Radio {
  width: 100%;
  height: 100%;
}
.active {
  background-color: #00557f;
  color: #fff;
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
}
.active2 {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
}
</style>