[toc] # 4.2 充值金币页开发(二) ## 4.2.1 模拟选择充值金币的数据,并实现数据的动态渲染 ``` <template> <view class="border-top border-light-secondary p-3"> <!-- 当前金币 --> <view class="rounded py-4 flex flex-column align-center justify-center bg-main"> <text class="text-white font-sm mb-2">当前金币</text> <text class="font-weight-bold text-white" style="font-size: 60rpx;">50</text> </view> <!-- 分割线 --> <view class="border-top border-light-secondary my-3"></view> <!-- 选择充值金币标题 --> <view> <text class="font-sm text-muted">请选择充值金币</text> </view> <!-- 选择充值金币列表 --> <view class="flex flex-wrap" style="margin-left: -20rpx; margin-right: -20rpx;"> <view v-for="(item,index) in list" :key="index" style="width: 33.3%; box-sizing: border-box; " class=" p-2"> <view style="height: 130rpx;" class="border rounded flex flex-column align-center justify-center"> <view class="flex align-center"> <text class="iconfont text-warning mr-1">&#xe633;</text> <text class="font-md font-weight-bold">{{item.coin}}</text> </view> <text class="font text-light-muted">¥{{item.price}}</text> </view> </view> </view> </view> </template> <script> export default { data(){ return { //选择充值金币的模拟数据 list : [ { coin : 10, price : 10 }, { coin : 20, price : 20 }, { coin : 30, price : 30 }, { coin : 50, price : 50 }, { coin : 100, price : 100 }, { price : 0 } ] } } } </script> <style> </style> ``` ## 4.2.2 实现自定义充值显示 ``` <!-- 选择充值金币列表 --> <view class="flex flex-wrap" style="margin-left: -20rpx; margin-right: -20rpx;"> <view v-for="(item,index) in list" :key="index" style="width: 33.3%; box-sizing: border-box; " class=" p-2"> <view v-if="item.price > 0" style="height: 130rpx;" class="border rounded flex flex-column align-center justify-center"> <view class="flex align-center"> <text class="iconfont text-warning mr-1">&#xe633;</text> <text class="font-md font-weight-bold">{{item.coin}}</text> </view> <text class="font text-light-muted">¥{{item.price}}</text> </view> <!-- 自定义 --> <view v-else style="height: 130rpx;" class="border rounded flex flex-column align-center justify-center"> <text class="font text-light-muted">自定义</text> </view> </view> </view> ``` ## 4.2.3 设置选中的边框颜色