一、实现效果：
文章来源：https://www.toymoban.com/news/detail-681252.html
二、代码实现：
不适用官方的change方法，自己定义点击方法。
动态判断定义的值是否等于遍历的值进行回显，如果和上一次点击的值一样，就把定义的值改为null文章来源地址https://www.toymoban.com/news/detail-681252.html
<template>
<view>
<radio-group>
<view v-for="(item, index) in list" :key="index">
<radio :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio>
<view>{{item.value}}</view>
</view>
</radio-group>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
value: '选项1',
id: '1'
},
{
value: '选项2',
id: '2'
},
{
value: '选项3',
id: '3'
}
],
radioValue: ''
}
},
methods: {
//自定义单选按钮的点击方法
radioCheck(index) {
this.list.forEach((item => {
item.isCheck = false
}))
if (this.radioValue == this.list[index].id) {
this.radioValue = null
} else {
this.radioValue = this.list[index].id
}
console.log(this.radioValue)
}
}
}
</script>
OK~
到了这里，关于uni-app开发小程序，radio单选按钮，点击可以选中，再次点击可以取消的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
