uniapp点击选项高亮

在UniApp中，要实现选项卡或列表中的项被点击后高亮显示的效果，你可以使用`<van-tabs>`或自定义的`<view>`结合CSS样式来实现。这里是一个基本的示例：

**1. 使用vant组件库（推荐）**:

<template>
  <van-tabs v-model="activeIndex">
    <van-tab v-for="(item, index) in tabs" :key="index" :title="item.title">
      <template slot="tab-bar">
        <van-tabbar-item :class="{ active: item === activeTab }"
          @click="handleTabClick(index)">
          {{ item.title }}
        </van-tabbar-item>
      </template>
      <div>{{ item.content }}</div>
    </van-tab>
  </van-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabs: [
        { title: '选项一', content: '这是第一个选项的内容' },
        { title: '选项二', content: '这是第二个选项的内容' },
        // 更多选项...
      ],
    };
  },
  methods: {
    handleTabClick(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
.van-tabbar-item.active {
  background-color: #e8f5fc; /* 高亮颜色 */
  color: #333;
}
</style>

**2. 自定义实现（原生HTML/CSS）**:

<template>
  <div>
    <ul class="tab-list">
      <li v-for="(item, index) in items" :key="index" :class="{ active: index === currentIndex }"
          @click="setCurrentTab(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项一', '选项二', '更多选项...'],
      currentIndex: 0,
    };
  },
  methods: {
    setCurrentTab(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
.tab-list {
  display: flex;
  list-style-type: none;
}

.tab-list li {
  padding: 10px;
  cursor: pointer;
}

.tab-list li.active {
  background-color: #e8f5fc;
  color: #333;
}
</style>

在以上代码中，当用户点击选项时，对应的`<van-tabbar-item>`或`<li>`元素会获得`active`类，从而改变其样式以显示高亮。