vue中移动端实现评价功能，包含单选和多选

1、带出后台默认选中的选项，根据defaultSelected判断，如果为1，默认选中

2、单选和多选根据selectType判断，1为单选，2为多选

效果图如下：

代码如下：

注意：radio和checkbox默认的选中根据defaultSelected变量而来，绑定到checked上，不能绑定到v-model上，如果有v-model,则checked失效。

<div class="pingfen" v-for="(son,index) in dataList" :key="index">
		<div class="question">{{son.ruleName }}{{son.selectType== 1 ? '' : '(多选)' }}：</div>
		<ul class="answer" v-if="son.selectType== 1">
			<li v-for="(sson,sonindex) in son.ruleContent" :key="sonindex" >
					<input type="radio" 
                     :id="son.ruleName+sonindex"  
                     :value="sson.value"
                     @change="get_radio_value(sson,sonindex,index)" 
                     :checked="sson.defaultSelected==1"/>
					<label :for="son.ruleName+sonindex" class="choice-item">{{sson.value}}</label>
			</li>
		</ul>
		<div style="clear: both"></div>
		<ul v-if="son.selectType== 2" class="answer">
			<li v-for="(sson,sonindex) in son.ruleContent" :key="sonindex" >
			    <input type="checkbox" 
                :id="son.ruleName+sonindex"  
                :value="sson.value" 
                @change="get_radio_value(sson,sonindex,index)"  
                :checked="sson.defaultSelected==1"/>
				<label :for="son.ruleName+sonindex" class="choice-item">{{sson.value}}</label>
			</li>
		</ul> 
							
</div>

 根据input的@click方法来改变选中的defaultSelected值，代码如下：

get_radio_value(sson,sonindex,index) {
						if(this.dataList[index].selectType=='1'){
							//如果是单选
							for(var i=0;i<this.dataList[index].ruleContent.length;i++){
						  if(sonindex!==i){
								 this.dataList[index].ruleContent[i].defaultSelected=0
						   }
							 else{
                this.dataList[index].ruleContent[sonindex].defaultSelected=1
							 }
						 }		
						}
						else{
							//如果是多选
								if(this.dataList[index].ruleContent[sonindex].defaultSelected==1){
									this.dataList[index].ruleContent[sonindex].defaultSelected=0
									 }
									 else{
										this.dataList[index].ruleContent[sonindex].defaultSelected=1
									 }
							 }
						},

提交代码时，需要验证是否都评价完，并获取选中的数据传给后台

handleSubmit(){
   //循环数组，在ruleContent中找到每项中defaultSelected是否为1，如果没有1，则表示评价没有选择完毕
	for(var i=0;i<this.dataList.length;i++){
		let sfwc=	this.dataList[i].ruleContent.findIndex(item=>{
				return item.defaultSelected==1 	})
		if(sfwc==-1){
			$.toast("评价没有选择完毕");
			return
		}	
		}
   //把dataList数组赋值给newArr,当newArr数组改变时，dataList数组不会变
	let newArr = JSON.parse(JSON.stringify(this.dataList));
		newArr.forEach((value,index) => {
		newArr[index] = value;
		newArr[index].ruleContent= value.ruleContent.filter(
				item => item.defaultSelected === 1)
		})
   console.log(newArr)
}

样式：需要把input隐藏，美化选项，代码如下：

.pingfen{width:100%; padding-top: 10px; clear: both;}
		.answer{margin-top: 5px;}
		.answer li{
	float: left;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	margin: 0px 1.5%;
	
}
		 .choice-item{
		 display: block;
		 margin:0px;
		 padding:5px 25px;
		 color: #333;
		 font-size: 14px;
		 text-align: center;}
		 .answer input{float: left;width: 100%; display: none;}
		  input + label{border: 1px solid #ddd; border-radius: 5px; }
		 input:checked + label{
 border: 1px solid #4877e7; border-radius: 5px;
 color: #4877e7;}