博客

先看效果图：

接下来看vue代码：

<template>
   <view class="box-item">
       <view 
           :class="current==index?'item-list-active':'item-list'" 
           v-for="(item,index) in list" 
           :key="index"
           @click="current=index"
       >
           <text class="item-list-txt">{{item.price}}</text>
       </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            current: 0,
            list: [
               { price: '10元' },
               { price: '20元' },
               { price: '50元' },
               { price: '100元' },
               { price: '200元' },
               { price: '300元' },
            ]
         }
      },
      methods: {

      }
   }
</script>

<style>
   .box-item {
      padding: 49rpx 0;
      display: flex;
      flex: 1;
      justify-content: space-between;
      flex-wrap: wrap;
   }
   .item-list {
      color: #999999;
      width: 200rpx;
      height: 139rpx;
      line-height: 139rpx;
      text-align: center;
      border-radius: 20rpx;
      background-color: #F7F6F9;
      margin-bottom: 27rpx;
   }

   .item-list-active {
      color: #FFFFFF;
      width: 200rpx;
      height: 139rpx;
      line-height: 139rpx;
      text-align: center;
      border-radius: 20rpx;
      background-color: #FF3F3D;
   }

   .item-list-txt {
      font-size: 42rpx;
   }
   
</style>