<div id="firstApp">
Counter: {{ count }}
<button v-on:click="toggle">{{ counterAction() }}</button>
</div>#firstApp {
display: inline-block;
padding: 10px;
font-size: 36px;
font-family: 'Helvetica Neue', 'Open Sans', sans-serif;
}
#firstApp button {
background: #4c82ff;
border: 0;
color: #FFF;
font-size: 16px;
margin-top: 6px;
padding: 5px 10px;
border-radius: 3px;
display: block;
width: 100%;
}var firstApp = new Vue({
el: '#firstApp',
data: {
count: 0,
timer: null
},
methods: {
toggle: function toggle() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
} else {
this.timer = setInterval(function() {
firstApp.count += 1;
}, 1000);
}
},
counterAction: function counterAction() {
if (this.timer) {
return 'stop';
} else {
return 'start';
}
}
}
});
External CSS
This Pen doesn't use any external CSS resources.