uni-app点击按钮改变按钮颜色

在Uni-App中，你可以使用Vue的响应式数据以及CSS变量（Custom Properties）来动态地改变按钮的颜色。首先，你需要给按钮添加一个data属性来存储当前的颜色状态，然后通过修改这个数据值，触发视图更新，进而改变按钮的样式。

这是一个基础的例子：

<template>
  <button :class="{ primary: activeColor === 'primary', danger: activeColor === 'danger'}" @click="changeColor('primary')">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'primary',
    }
  },
  methods: {
    changeColor(color) {
      this.activeColor = color; // 改变数据值
      // 如果你想同时更新CSS，也可以这样：
      // this.$apply(); // 刷新样式
    }
  }
}
</script>

<style scoped>
button {
  transition: background-color 0.5s;
}

.primary {
  background-color: #4CAF50;
}

.danger {
  background-color: #f44336;
}
</style>

在这个例子中，当你点击按钮时，`changeColor` 方法会被调用，将`activeColor`设为传入的颜色，按钮会相应地变为新颜色。`primary`和`danger`是CSS类名，分别对应预定义的颜色。如果希望实时看到颜色变化，可以考虑使用`.apply()`方法来立即刷新样式。