<template>
<div class="radioGroups">
<div @click="clickItem(key)"
:class="{'item-checked':tab_value===key,'item-default':tab_value!==key}"
v-for="(content,key) in radioGroupContents" :key="key">
{
{content}}
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "HelloWorld",
props: {
msg: String,
},
setup() {
let _data = reactive({
radioGroupContents: ["春季", "夏季", "秋季", "冬季"],
// 这里初始化为undefined【不等于任何值】确保首次不选择任何ab不选择!
tab_value: undefined,
itemChecked: false,
});
function clickItem(key) {
_data.tab_value = key;
}
return {
...toRefs(_data),
clickItem,
};
},
};
</script>
<style scoped lang="scss">
.radioGroups {
width: 400px;
background: red;
display: flex;
justify-content: space-between;
margin: 0 auto;
.item-default {
padding: 2px;
margin: 2px;
width: 80px;
height: 20px;
border: 2px solid #000;
border-radius: 5px;
}
.item-checked {
@extend .item-default;
background: #F0F8FF url("../assets/gou.png") no-repeat right;
background-size: 30px 30px;
}
}
</style>