Vue

by Ganesh_Babu_469

HTML

<div id="app">
<button @click="output">increase
</button>
<p>
{{counter}}
</p>
<p>
{{nval}}
</p>
<p>
{{oval}}
</p>

<button @click="redAttach = !redAttach">red
</button>
<div style="height: 20px;width:20px" :class="{red: redAttach}">

</div>
</div>

CSS

.red{
  background-color: red
}

Vue

new Vue({
el: '#app',
computed: {

},
data(){
return {
msg: 'nice',
counter:0,
nval:0,
oval:0,
redAttach: false
}
},
methods: {
output: function(){
return this.counter++;
}
},
watch:{
counter: function(newV, oldV){
this.nval = newV;

}
}
})