【Vue】【uni-app】【小程序】在不使用uni-ui的情况下，仅用内置组件实现一个基础的单选按钮组（小白向）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

需求

uniapp开发小程序，在不使用uni-ui的情况下，仅用内置组件实现一个基础的单选按钮组，代码简单清晰小白一眼就懂。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用radio-group

参考官方文档：https://uniapp.dcloud.net.cn/component/radio.html

二、代码实现

1.template部分代码部分

代码如下：

<radio-group>
  <view class="radio-row">
    <radio-group @change="handleRadioChange" class="group-radio" style="font-size: 16px;">
      <label class="radio-label">
		<radio value = 1 style="transform:scale(0.70);" color="#39c5bb" :checked="ischange == '1'" />是
	  </label>
	  <label class="radio-label">
		<radio value = 0 style="transform:scale(0.70);" color="#39c5bb" :checked="ischange == '0'" />否
	  </label>
	</radio-group>
  </view>
</radio-group>

控制按钮的大小：

style="transform:scale(0.70); //70%的大小

控制按钮的颜色：

color = "#39c5bb" 

判断是否被选中：

:checked = "ischange == '0'" 

按钮的值：

value = 0 
value = '是' 

2.script部分代码部分

代码如下：

export default {
    data() {
        return {
            ischange:0,
        };
    },
    methods: {
        //单选按钮
        handleRadioChange(val) {
            this.ischange = val.detail.value;
            //console.log(this.ischange); //检查一下值是否正确
        },
    },
}

---

效果预览

总结

刚刚从web端转到小程序的时候可能会觉得很别扭，因为语法上有些许差异，但是基本思路是一样的，多看看文档和文章，相信很快可以上手。