vue中不使用`<input type="radio"/>`实现单选 多个选项
html部分
<ul>
<li v-for="(item,index) in arr" :key="item.id" @click="chooseClick(index)">
<span>
<img v-if="item.isChoose" src="./img/choose.png" alt />
<img v-else src="./img/chooseno.png" alt />
</span>
<span>{{item.title}}</span>
</li>
</ul>
js部分
data() {
return {
n: 6,
arr: [
{ id: "1", title: "选项1", isChoose: false },
{ id: "2", title: "选项2", isChoose: false },
{ id: "3", title: "选项3", isChoose: false },
{ id: "4", title: "选项4", isChoose: false },
{ id: "5", title: "礼", isChoose: false },
{ id: "0", title: "其他问题", isChoose: false }
],
imgarr: []
};
},
methods:{
chooseClick(index) {
//选择问题类型
for (let i = 0; i < this.arr.length; i++) {
if (index == i) {
//选中之后可以进行取消
// this.arr[index].isChoose = !this.arr[index].isChoose;
//选中之后不可取消 必须有一个是选中的
this.arr[index].isChoose = true;
this.n = index;
} else {
this.arr[i].isChoose = false;
}
}
},
.questionType {
font-size: 0.14rem;
text-align: left;
padding: 0.1rem 0.15rem;
padding-bottom: 0rem;
box-sizing: border-box;
p {
letter-spacing: 1px;
font-size: 0.14rem;
padding-bottom: 0.15rem;
box-sizing: border-box;
}
ul {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
li {
width: 50%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.1rem 0rem;
padding-left: 0.1rem;
box-sizing: border-box;
border-top: 1px solid #ccc;
span:nth-child(1) {
display: block;
margin-right: 0.1rem;
img {
width: 0.12rem;
height: 0.12rem;
vertical-align: middle;
}
}
span:nth-child(2) {
font-size: 0.12rem;
color: #777;
}
}
}
}