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

最新推荐文章于 2024-07-24 16:36:17 发布

疆~

最新推荐文章于 2024-07-24 16:36:17 发布

阅读量1.8w

点赞数 1

本文链接：https://blog.csdn.net/qq_40323256/article/details/114282983

版权

微信小程序/uniCloud 专栏收录该内容

64 篇文章 43 订阅

订阅专栏

一、单选框

效果图：

代码实现：

<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>

二、多选框

代码实现：

<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>