html部分
<div style="width:500px;margin:50px auto;display:flex;flex-direction:column;">
<div style="font-weight:600;font-size:18px">問卷調查</div>
<div v-for="(item,index) in question" :key="index" style="padding-top:10px">
<div style="margin-bottom:10px">{{item.title}}</div>
<div v-if="item.sex" style="display:flex;align-items:center;">
<div v-for="(item2,index2) in item.sex" :key="index2" @click="chooseSex(item2)" style="margin-right:20px">
<input type="radio" :value="item2" v-model="radio2"> <span> {{item2}}</span>
</div>
</div>
<div v-if="item.item" style="display:flex;align-items:center;">
<div v-for="(item3,index3) in item.item" :key="index3" @click="chooseHobbied(item3)" style="margin-right:20px">
<input type="checkbox" :value="item3" v-model="checkbox"><span> {{item3}}</span>
</div>
</div>
</div>
</div>
vue資料綁定
data() {
return {
radio2:'',
checkbox:[],
question:[
{
title:"1、請選擇你的性别",
sex:[
'男','女'
]
},
{
title:"2、請選擇你的愛好",
item:[
'打球','讀書','畫畫','遊泳','跑步'
]
}
],
};
},
js部分
//單選框radio選中值的改變
chooseSex(item){
this.radio2 = item;
console.log("點選",item,"值",this.radio2);
},
//複選框checkbox多項選擇後的值,及取消選中後的其他值
chooseHobbied(item){
if(box.indexOf(item) === -1){
box.push(item);
this.checkbox = box;
console.log("點選",item,"值",box);
}else{
box.splice(box.indexOf(item),1);
console.log("box值",box);
this.checkbox = box;
}
},