vue.js - 如何改变按钮点击时的颜色？ (视)

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>