Selection options of uniapp components (such as package selection)

Functional effect ：

The code is as follows ： 

 <template>
      <view class="text-data">
           <view class="text-item" v-for="(item, index) in list" :key='index'  @click="clicktab(index)" :class="{active:activeindex===index}">
              <view>
                  <!--  Click to change the picture  -->
                  <image :src="activeindex===index? '../../static/img/2.png' : '../../static/img/1.png'"></image>
              </view>
              <view>
                  {
   {item.name}}    
             </view>                
          </view>        
     </view>
 </template>
 <script>
     export default {
         data() {
             return {
                 list:[
                     {name:' package 1'},
                     {name:' package 2'},
                     {name:' package 3'},
                     ],
                 //  No one is selected by default , by 0, The first... Is selected by default 
                 activeindex: -1,
                 }            
         },
         methods: {
             clicktab(index){
                 //  You can select and cancel （ here index Index the selected subitems ）
                 this.activeindex = this.activeindex==index?-1:index;
                 // this.activeindex = index;  Cannot cancel after selection 
             }
         }
     }
 </script>
 <style lang="scss">
     .text-data{
         display: flex;
         flex-direction: row;
         height: 80px;
         margin-top: 20px;
         justify-content: space-between;
         .text-item{
             margin-left: 20rpx;
             margin-right: 20rpx;
             height: 80px;
             width: 120px;
             border: 1px #d4d4d4 solid;
             display: flex;
             image{
                 height: 20px;
                 width: 20px;
             }
             //  The style changes after clicking 
             &.active{
                 color: #ff0000;
                 background-color: #faf8f4;
                 border:1px #808270 solid;                
             }
         }
         
     }
 </style>