vue.js - 单击时如何更改按钮的颜色？(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>

标签： vue.js

Answer 1

您应该clicked通过以下方式明确设置属性@click="clicked = !clicked"：

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