radio 在移动端自定义

# 在移动端 单选框样式不好看  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>

```