vue要怎么实现单选按钮选中之后取消

Question

控制单选按钮点击选中后再次点击取消选中

Answer 1

<div :class"={selected:selectIndex}" @click="selectIndex=!selectIndex"></div>

简化点这么写了。selectIndex默认为true就是选中，给这个类名写对应的选中样式

Answer 2

额，你这个问题有点模糊啊。单元按钮不就是点一下选中再点消失吗

Answer 3

可以用复选框模拟单选按钮

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="(city,index) in cities" :label="city" :key="city" @change='hanChange(city,index)'>{{city}}</el-checkbox>
  </el-checkbox-group>
</template>

data() {
  return {
    checkedCities: ['上海'],
    cities: ['上海', '北京', '广州', '深圳']
  };
},
methods: {
  hanChange(city,index) {
      this.checkedCities = this.checkedCities.includes(city)?[city]:[]
  }
}