<template>
<view class="box">
<view :class="flag==1?'shows xian':'shows'" @click="up(1)">
男
</view>
<view :class="flag==2?'shows xian':'shows'" @click="up(2)">
女
</view>
</view>
</template>
<script>
export default {
data() {
return {
// flag改成1默认是男,改成2默认是女
flag:-1
}
},
onLoad() {
},
methods:{
up(n){
this.flag = n
}
}
}
</script>
<style>
.box{
width: 100%;
height: 130px;
background: #003377;
color: #fff;
}
.shows{
float: left;
width: 25px;
height: 25px;
border-radius: 50px;
border: 1px solid #fff;
float: left;
font-size: 15px;
text-align: center;
margin-left: 15px;
}
.xian{
background-color: #ffff00;
color: black;
}
</style>
Uniapp选项切换(示例)
于 2023-03-29 14:34:51 首次发布