uniapp组件-uni-data-checkbox 单选框/复选框

我就是我 2021-07-25 14:41 4861阅读 0赞

## 一、单选框 ##

效果图：

![20210302132438819.gif][]

代码实现：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		<uni-section title="单选" type="line"/>
    		<view class="text">选中：{
       { value }}</view>
    		<uni-data-checkbox v-model="value" :localdata="sex"/>
    		<uni-data-checkbox v-model="value" :localdata="sex" mode="button"/>
    		<uni-data-checkbox v-model="value" :localdata="sex" mode="tag"/>
    		<uni-data-checkbox v-model="value" :localdata="sex" mode="list" icon="right"/>
    		<uni-data-checkbox v-model="value" :localdata="sex1" mode="button"/>
    		<uni-data-checkbox v-model="value" :localdata="sex1" selectedColor="red"/>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			value: 1,
    			sex: [
    				   {text: '男',value: 0},
    				   {text: '女',value: 1},
    				   {text: '未知',value: 2}
    			],
    			sex1: [
    				   {text: '男',value: 0},
    				   {text: '女',value: 1,disable: true},
    				   {text: '未知',value: 2}
    			]
    		};
    	},
    };
    </script>

## 二、多选框 ##

![20210302133250202.gif][]

代码实现：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

<template>
    	<view>
    		<uni-section title="多选" type="line"/>
    		<view class="text">选中：{
       { JSON.stringify(hobbies) }}</view>
    
    		<uni-data-checkbox multiple v-model="hobbies" :localdata="hobby"/>
    		<uni-data-checkbox multiple v-model="hobbies" :localdata="hobby" mode="button"/>
    		<uni-data-checkbox multiple v-model="hobbies" :localdata="hobby" mode="tag"/>
    		<uni-data-checkbox multiple v-model="hobbies" :localdata="hobby" mode="list"/>
    
    		<uni-data-checkbox multiple v-model="hobbies" :localdata="hobby" min="1" max="2"/>
    		<uni-data-checkbox multiple v-model="hobbies" :localdata="hobby2" mode="button"/>
    		<uni-data-checkbox multiple v-model="hobbies" :localdata="hobby2" selectedColor="red"/>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			hobbies: [1],
    			hobby: [
    				{text: '足球',value: 0},
    				{text: '篮球',value: 1},
    				{text: '游泳',value: 2}
    			],
    			hobby2: [
    				{text: '足球',value: 0,disable: true},
    				{text: '篮球',value: 1,disable: true},
    				{text: '游泳',value: 2}
    			]
    		};
    	},
    };
    </script>

[20210302132438819.gif]: https://img-blog.csdnimg.cn/20210302132438819.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210302133439806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20210302133250202.gif]: https://img-blog.csdnimg.cn/20210302133250202.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021030213331213.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70