uni-app的组件(二)

多项选择器checkbox-group

多项选择器,内部由多个 checkbox 组成。

		<checkbox-group>
			<checkbox checked color="red" value="1"></checkbox> 篮球
			<!-- disabled:是否禁用 -->
			<checkbox disabled color="rgba(0,0,0,0.5)" value="2"></checkbox> 足球
			<checkbox color="rgb(0,0,0)" value="3"></checkbox> 排球
		</checkbox-group>

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名 类型 默认值 说明
checked Boolean false 当前是否选中,可用来设置默认选中
disabled Boolean false 是否禁用
color color checkbox的颜色,同css的color

效果图展示

在这里插入图片描述

单行输入框input

		<input type="text" placeholder="给个提示">
		<input type="text" v-model="msg">
		<input type="text" :value="msg">
		<!-- password:密码格式 maxlength:设置最大数 -->
		<input type="text" password value="123456" maxlength="6">

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名 类型 默认值 说明
value String 输入框的初始内容
placeholder String 输入框为空时占位符
type String text input 的类型 [有效值]
v-model String 数据绑定
:value String 数据绑定
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
password Boolean false 是否是密码类型

效果图展示

在这里插入图片描述

单项选择器radio-group

单项选择器,内部由多个 radio 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。

		<radio-group @change="handlechange">
			<radio value="1" disabled ></radio>篮球
			<radio value="2" checked color="red"></radio>足球
			<radio value="3"></radio>乒乓球
			<radio value="4"></radio>排球
		</radio-group>

属性说明(查看更多属性请查看官网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值