修改选中当前颜色 外边框颜色随之改变
**<template>
<view>
<view class="uni-list">
<view >
<view class="" v-for="(item, index) in items" :key="item.value">
<view @click="viewChange(index)" class="box" :class="[index === current ? 'isSlect1' : '']" >
<view :class="[index === current ? 'isSlect' : '']" class="circle" :value="item.value" />
</view>
<view>{{item.name}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [{
value: 'USA',
name: '美国',
checked: 'true'
},
{
value: 'CHN',
name: '中国'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
},
],
current: -1
}
},
methods: {
viewChange: function(evt) {
this.current = evt
}
}
}
</script>
<style>
.box {
width: 60rpx;
height: 60rpx;
border: 2rpx solid red;
border-radius: 50%;
}
.circle {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: aquamarine;
}
.isSlect {
background-color: salmon;
}
.isSlect1 {
border: 2rpx solid salmon;
}
</style>**