单击时如何更改按钮的颜色？ （Vue）

Question

我正在尝试获得一个按钮，该按钮在按下时会更改其颜色。再次按下时，它应该变回其原始颜色。我究竟做错了什么？

模板中的按钮：

<th><Button v-bind:class="{'white': !clicked, 'blue': clicked}" v-on:click ="!clicked" ></Button></th>


<script>
    export default {
        data: {

clicked: false
        }

    }

</script>

<style>
   .white {
       background-color: white;
       width: 200px;
       height: 200px;  

   }
   .blue {
       width: 200px;
       height: 200px;
       background-color: blue;

   }


</style>

Answer 1

您应通过clicked明确设置@click="clicked = !clicked"属性：

<th>
  <Button
    v-bind:class="{'white': !clicked, 'blue': clicked}"
    v-on:click ="clicked = !clicked"
  />
</th>