如何改变按钮点击时的颜色？（视）

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>