uniapp实现按钮点击高亮切换

在 UniApp 中，你可以使用条件渲染和绑定事件来实现按钮点击高亮切换的效果。下面是一个简单的示例：

1. 在页面的模板中定义按钮，并为按钮绑定点击事件：

<template>
  <view>
    <button class="btn" :class="{ active: isActive }" @click="toggleActive">按钮</button>
  </view>
</template>

2. 在页面的脚本中定义相关的数据和方法：

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

3. 在页面的样式中定义按钮的样式和高亮样式：

<style>
.btn {
  width: 100px;
  height: 40px;
  background-color: #ccc;
  border-radius: 4px;
  color: #fff;
}

.active {
  background-color: #f00;
}
</style>

在这个示例中，我们通过绑定 `isActive` 变量来控制按钮的高亮状态。当按钮被点击时，`toggleActive` 方法会切换 `isActive` 的值，从而实现按钮的高亮切换。通过条件渲染的方式，我们可以根据 `isActive` 的值来动态添加或移除 `active` 类，从而改变按钮的样式。

这样，当按钮被点击时，它会切换为高亮状态，再次点击则取消高亮状态。你可以根据自己的需求修改样式和按钮的行为。