javascript - 使用vue更改点击时的背景颜色

Question

我想在单击时将背景颜色从蓝色更改为另一种颜色。这是我到目前为止所做的，但它不起作用。

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<button v-on:click="dissapear" id="bluebaloon">

</button>
</div>

CSS

#bluebaloon{
  background-color:blue;
  height:100px;
  width:100px;
  border-radius:50px;
}

JS

var app = new Vue({
el :'#app',
methods:{
dissapear: function(){
this.dissapear.style.backgroundColor = "red";
}
}

}); 

Answer 1

尝试使用 VueJs react 性来更改样式:

<button v-on:click="dissapear" id="bluebaloon" :style="{ 'background-color': dissapearColor }">

...
data: {
  return {
    dissapearColor: 'blue'
  }
}
...
methods:{
  dissapear () {
    this.dissapearColor = "red";
  }
}