[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 設置選中的邊框顏色