uniapp、uView——复选框的使用（使用星期为例）、三目运算、push、forEach遍历方法

一、简介

选择多项内容，这里以选择星期为例。
如果什么都不选，点击“确定”需要进行提示。未选之前字体是灰色的，选完之后，实际内容要渲染到页面上，后台打印的内容是数组类型，内含数值类而不是字符串类。因为打印的数组之后要传给后台。

演示：

二、代码

<template>
	<view class="content">
		<view class="right" @click="useDays" :style="!dayTxt?'opacity:0.6;':''">
			{{dayTxt?dayTxt:'请选择使用日'}}
		</view>
		<!-- 使用日start -->
		<u-popup :show="dayshow" mode="bottom" :round="20" @close="close" overlayOpacity="0.74" :closeable="true">
			<view class="checkDays">
				<view class="daytitle">
					选择可使用日
				</view>
				<view>
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"
						iconPlacement="right" activeColor="#6C8FF8" size="38rpx">
						<u-checkbox :customStyle="{marginBottom: '40rpx'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.nums" labelSize="32rpx">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="subBtn" @click="daysBtn()">
					确定
				</view>
			</view>
		</u-popup>
		<!-- 使用日end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dayshow: false,
				// 使用日
				checkboxValue1: [],
				dayTxt: '',
				// 数组
				checkboxList1: [{
						name: '周一',
						nums: 1,
						disabled: false
					},
					{
						name: '周二',
						nums: 2,
						disabled: false
					},
					{
						name: '周三',
						nums: 3,
						disabled: false
					},
					{
						name: '周四',
						nums: 4,
						disabled: false
					},
					{
						name: '周五',
						nums: 5,
						disabled: false
					},
					{
						name: '周六',
						nums: 6,
						disabled: false
					},
					{
						name: '周日',
						nums: 7,
						disabled: false
					}
				],
			}
		},
		onLoad() {},
		methods: {
			close() { //关闭弹出层
				this.dayshow = false
			},
			// 使用天
			useDays() {
				console.log("选择可使用的日期");
				this.dayshow = true
			},
			checkboxChange(n) {
				console.log(n);
				this.checkboxValue1 = n
			},
			// 确定
			daysBtn() {
				if (this.checkboxValue1.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择天数'
					})
				} else {
					this.close()
					let dayTxt = []
					this.checkboxValue1.forEach((i) => {
						this.checkboxList1.forEach((item, index) => {
							if (item.nums == i) {
								dayTxt.push(item.name)
							}
						})
					})
					console.log(this.checkboxValue1)
					this.dayTxt = dayTxt.join()
				}
			},
		}
	}
</script>

<style lang="scss">
	// 使用日弹框
	.checkDays {
		padding: 0 30rpx;
		font-size: 34rpx;

		.daytitle {
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			padding: 40rpx 0;
		}

		.subBtn {
			margin: 40rpx 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #6C8FF8;
			box-shadow: 0px 0px 24rpx 0px rgba(202, 202, 202, 0.41);
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>

三、总结与分析

1.网址：https://www.uviewui.com/components/checkbox.html

2.整体图：

3.三目运算

<view class="right" @click="useDays" :style="!dayTxt?'opacity:0.6;':''">
	{{dayTxt?dayTxt:'请选择使用日'}}
</view>

data() {
	return {
		dayTxt: '',
	}
}，
onLoad() {
	console.log(Boolean(this.dayTxt));//结果是false
},

不要在data里面定义初始变量值了，直接在结构里面进行三目判断吗，由于定义是个空数组，打印一下它的布尔类型得到的是false，三目的特性：
表达式？‘ 表达式结果为真输出前面这个’：‘为假输出后面这个’；

2>1 ? 1 : 2 ;//2大于1吗？ 大于1，所以条件为真输出前面的1   结果是1
var a = '张起灵'
a == '吴邪' ? 'yes':'no';  //结果为no

所以此例子

dayTxt?dayTxt:'请选择使用日'   //dayTxt为空为false，不满足条件   输出请选择使用日

:style="!dayTxt?'opacity:0.6;':'' "  //!false就是true,满足条件走第一个  所以刚开始默认文字颜色的透明度是0.6，黑色的0.6就是灰色

4.push

网址:https://www.runoob.com/jsref/jsref-push.html

dayTxt.push(item.name)    旧数组.push(新内容)

5.forEach遍历

网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

let dayTxt = [] 
this.checkboxValue1.forEach((i) => {
	this.checkboxList1.forEach((item, index) => {
		if (item.nums == i) {
			dayTxt.push(item.name)
		}
	})
})
console.log(this.checkboxValue1)
this.dayTxt = dayTxt.join()
//dayTxt 是要显示在页面上的文字的集合，即数组，这里重新定义为空数组
//this.checkboxValue1.forEach((i)=>{})  
//这里对选中的多个日期返回的数组[6,7]进行遍历，得到6  ， 7，所以i = 6，i = 7
//this.checkboxList1.forEach((item, index)=》)  对整个数组(内容7个)进行遍历循环，
{
	name: '周六',
	nums: 6,
	disabled: false
},
//选中的i   与 循环出来的元素的nums进行比较，如果相等，说明选中的就是这个，
//在这里对比，周六、周天的对象对比了出来，item.name  
//我们只需要把元素的name push到空数组daytxt里面，那么dayTxt：['周六','周天']