我想在单击时将背景色从蓝色更改为另一种颜色。
这是我到目前为止所做的,但是没有用。
的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";
}
}
});
最佳答案
尝试使用VueJs反应性来更改样式:
<button v-on:click="dissapear" id="bluebaloon" :style="{ 'background-color': dissapearColor }">
...
data: {
return {
dissapearColor: 'blue'
}
}
...
methods:{
dissapear () {
this.dissapearColor = "red";
}
}