用vue框架实现一个计数器,点击加按钮,计数器加1,点击减按钮,计数器减一
<body>
<div id="app">
<h2>当前计数:{{count}}</h2>
<button v-on:click="count++">+</button>
<button v-on:click="count--">-</button>
</div>
</body>
<script>
const app=new Vue({
el:'#app',
data:{
count:0
}
})
</script>
最终效果:
使用函数:
<body>
<div id="app">
<h2>当前计数:{{count}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
</body>
<script>
const app=new Vue({
el:'#app',
data:{
count:0
},
methods:{
add: function(){
this.count++;
},
sub:function(){
this.count--;
}
}
})
</script>