首页 > uniapp
列表点击哪个,哪个变颜色
来源:TP课堂 时间:2023-12-13 点击:1860

<template>
    <view>
       <view>
   <view v-for="(item, index) in itemList"
      :key="index"
      :class="{ 'item': true, 'active': activeIndex === index }"
      @click="toggleActive(index)">{{item}}</view>

   
   <button type="primary">保存</button>
   </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
 itemList: ['生物', '微生物', '化学', '合成生物'],
 activeIndex: null
            }
        },
        methods: {
            toggleActive(index) {
                 this.activeIndex = index;
               }
        }
    }
</script>

<style scoped>
   .content{
   padding: 10px;
   }
   .box{
   display: flex;
   flex-wrap: wrap;
   }
   .box .item{
   width: 200rpx;
   height: 200rpx;
   border-radius: 50%;
   margin: 17rpx;
   border: 1px solid #ddd;
   display: flex;
align-items: center;
justify-content: center;
   }
   .btn{
    background-color: $main_green;
    border-radius: 50px;
    width:600rpx;
    margin-top: 50px;
    position: fixed;
    bottom: 20px;
    left: 75rpx;
   }
   .active{
   background-color: $main_green;
   color: #fff;
   }
</style>

image.png

上一篇: uniapp插件收藏