JS中创建临时性/暂时性属性经验分享

一、业务背景:最近在开发小程序试题的顺序练习模块,在做单选题/判断题时,如果选完选项后当前题需要变成不可选的状态,如何选择错的话,试题下面会显示正确答案和解析,选择对的话就不显示答案或者解析,效果图如下:

二、以此为例,试题做完之后判断是否隐藏(disabled)和试题做对与否而对应的答案是否隐藏和展示(answerShow)的这两个属性是后台传过来是没有的,那怎么办?前台拿到后台试题集合时,JS中遍历该试题集合给每个试题对象新添加加上需要的属性,跟后台去添加相关属性方便的多,这里我把JS中添加后台返回数据中没有的但前台需要的属性,称之为临时性/暂时性属性,那JS中如何添加,关键代码展示如下:

A.方法中的代码

methods: {
	//每次都是根据试题ID一道一道的查,并把该试题放入试题集合optionList中进行显示
    //index为当前试题集合的下标
	wxGetQuestionById(id, index){
		wxGetQuestionById(id).then(res=>{
			//拿到该试题对象
			let getQuesIndetail = res.response;
			if(getQuesIndetail != null){
				//js中给该试题对象创建新属性(disabled:是否可选,默认是可选的,为true)
				getQuesIndetail.disabled = true;
				//js中给该试题对象创建新属性(answerShow:答案和解析是否显示,默认是不显示的,为false)
				getQuesIndetail.answerShow = false;
			}
			//把该试题对象赋值给对应下标试题集合中去
			this.optionList[index] = getQuesIndetail;
			//此方法主要使用主要解决赋值后页面值不能及时刷新的问题
			this.$set(this.optionList, index, this.optionList[index]);
		});
	},
}

B.标签代码:

<swiper-item class="content-exam-item" v-for="(items, indexs) in optionList" :key="indexs">
	<!-- 填空题选项:单选/判断/填空 questionType:试题类型 xuXiangList:当前试题选项集合-->
	<!-- items.disabled 为true时即为可选状态 false则为不可选状态-->
	<radio-group v-if="items.questionType == 1 || items.questionType == 3 || items.questionType == 4" @change="onRadio(indexs, $event)">
		<label v-for="(item, index) in items.xuXiangList" :key="index" class="options-label" @click="itemClickChe(indexs, items, index, item)">
			<radio style="transform:scale(0.95)" 
				:value="item.prefix" 
				:disabled="items.disabled"/>
			<view class="options-rich-text">
				<rich-text :nodes="item.prefix"></rich-text>
				<text>.</text>
				<rich-text :nodes="item.content"></rich-text>
			</view>
		</label>
	</radio-group>

	<!-- 答案解析 items.answerShow为true时即进行显示 false则不显示-->
	<view class="answer" v-show="items.answerShow">
		<view v-if="items.questionType !== 5 || items.questionType !== 6">
			<view class="answer-correct">答案 {{ items.questionObject.correct }}</view>
			<view class="answer-analyze">
				<view class="analyze-name">本题解析</view>
				<view class="analyze-detail"><rich-text :nodes="items.questionObject.analyze"></rich-text></view>
			</view>
		</view>
	</view>
</swiper>

小导向:

1.disabled 和 answerShow 什么时候变成 false 或者 true,是根据操作时调取的方法进行判断决定,具体的逻辑代码此处不再展示。
2.通过页面创建临时性属性,这样省去在后台添加属性了,因为后台添加一个新属性,相当于返回的实体类里必须对应添加新字段,就比较麻烦。
3.此实例我是在Vue框架中进行实现的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值