vue 单选-多选

1、代码

  <div v-for="(item, index) in list" :key="index">
    <div>
      问题：{{ index + 1 }}、{{ item.title }}
      <span v-if="item.state === 'single'">(单选)</span>
      <span v-else>(多选)</span>
    </div>
    <ol>
      <li
        v-for="(item2, index2) in item.answer"
        :key="index2"
        @click="onClick(item, item2)"
        :class="item2.select ? 'active' : ''"
      >
        {{ item2.value }}
      </li>
    </ol>
  </div>

2、数据

  data() {
    return {
      list: [
        {
          title: "你的学历",
          state: "single",
          answer: [
            {
              value: "幼本",
              select: false
            },
            {
              value: "小本",
              select: false
            },
            {
              value: "中专",
              select: false
            },
            {
              value: "大专",
              select: false
            }
          ]
        },
        {
          title: "你的年纪",
          state: "single",
          answer: [
            {
              value: "25",
              select: false
            },
            {
              value: "26",
              select: false
            },
            {
              value: "27",
              select: false
            },
            {
              value: "28",
              select: false
            }
          ]
        },
        {
          title: "你爱吃的食物",
          state: "selected",
          answer: [
            {
              value: "苹果",
              select: false
            },
            {
              value: "香蕉",
              select: false
            },
            {
              value: "橘子",
              select: false
            },
            {
              value: "哈密光",
              select: false
            }
          ]
        }
      ]
    };
  },

3、方法

  onClick(item, item2) {
    // 单选
    if (item.state === "single") {
      item.answer.forEach(row => {
        row.select = false;
      });
      item2.select = !item2.select;
    } else {
      // 多选
      item2.select = !item2.select;
    }
  }

4、CSS

.active {
  background-color: red;
}
.active::marker {
  color: red;
}