好看的单选项功能
代码:
<template>
<view>
<block v-for="(item,index) in price_array">
<view class="chose-txt" :class="[id==index?'select':'unselect']" @click="choseItem(index)" >
<text class="chose-p">{{item.name}}</text>
<text class="chose-p">{{item.price}}元</text>
</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
id: '0',
price_array: [{
name: '正常套餐',
price: '98'
}, {
name: '亲民套餐',
price: '198'
}, {
name: '女神套餐',
price: '298'
}, {
name: '霸王套餐',
price: '598'
}],
}
},
onLoad() {
},
methods: {
choseItem: function(e) {
console.log(e)
this.id=e
},
}
}
</script>
<style>
.chose-txt {
border-radius: 6px;
font-size: 26rpx;
height: 40px;
width: 27.5%;
margin: 5px;
float: left;
padding-top: 5px;
}
.chose-p {
line-height: 18px;
width: 100%;
height: 20px;
text-align: center;
float: left;
}
.select {
background: url(../../static/chose.png) right no-repeat;
border: 1rpx solid #e8580c;
color: #e8580c;
}
.unselect {
background:url();
border:1rpx solid gainsboro;
color:gray
}
</style>
图片: