# 在移动端 单选框样式不好看 ui会设计一套单选框样式 开发也就只有按照ui样式来进行开发
本人测试 使用2中方法实现单选,动态改变图片,获取选中的值 不足之处请指出(谢谢)
以下是实现代码:
```javascript
<template>
<div class="bankInfo">
<!-- 列表 start-->
<section>
<ul>
<!-- 第一种实现方法 -->
<li v-for="(item, index) in listArray" :key="index">
<i @click="change(item,index)" :class="['not_icon',{style:selectBg[index]}]"></i>
<span class="number">{{item.num}}</span>
<span class="text">{{item.text}}</span>
</li>
<!-- 第二种实现方法 -->
<!-- <li v-for="(item, index) in listArray" :key="index"><i @click="change(item,index)" :class="['not_icon',{style:index == selectedInfo}]"></i>
<span class="number">{{item.num}}</span>
<span class="text">{{item.text}}</span>
</li> -->
</ul>
</section>
<!-- 列表 end-->
</div>
</template>
<script>
export default {
data () {
return {
// 模拟数据
listArray: [
{
id: 0,
num: '01233890',
text: '哈哈哈哈'
},
{
id: 1,
num: '01233890',
text: '嘻嘻嘻嘻'
},
{
id: 2,
num: '01233890',
text: '呃呃呃呃'
},
{
id: 3,
num: '01233890',
text: '嘿嘿嘿嘿'
},
{
id: 4,
num: '01233890',
text: '么么么么'
}
],
selectBg: [],
selectedInfo: 0 //第二种方法直接根据索引来切换类
}
},
methods: {
// 当切换单选按钮时 保存当前获取到的值
change (item, index) {
// 第一种方法通过vue中set方法来改变数组
this.selectBg.forEach(function(element,index) {
this.$set(this.selectBg,index,false)
}, this)
this.$set(this.selectBg,index,true)
// 第二种
// this.selectedInfo = item.id
console.log('获取', index)
}
},
created () {
},
mounted () {
}
}
</script>
<style lang="scss">
.bankInfo {
width: 100%;
height: 200px;
section {
width: 100%;
ul {
width: 100%;
li {
width: 100%;
display: flex;
align-items: center;
i {
display: inline-block;
width: 46px;
height: 46px;
}
.not_icon {
background-color: gray;
}
.style {
background-color: pink;
}
.number {
margin-left: 30px;
}
.text {
margin-left: 30px;
}
}
}
}
}
</style>
```