一、實現(xiàn)效果：
文章來源：http://www.zghlxwxcb.cn/news/detail-681252.html
二、代碼實現(xiàn)：
不適用官方的change方法，自己定義點擊方法。
動態(tài)判斷定義的值是否等于遍歷的值進行回顯，如果和上一次點擊的值一樣，就把定義的值改為null文章來源地址http://www.zghlxwxcb.cn/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~
到了這里，關(guān)于uni-app開發(fā)小程序，radio單選按鈕，點擊可以選中，再次點擊可以取消的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
