如何用Vue实现一个计数器?
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本地应用-计数器</title>
</head>
<body>
<!-- html结构 -->
<div id="app">
<!--计数器功能区域-->
<div class="input-num">
<button v-on:click="sub()">
-
</button>
<span>{{ num }}</span>
<button @click="add()">
+
</button>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app", //注意这里的逗号,如果忘记打这个逗号了,下面的num不显示数据,别问我怎么知道的
data:{
num:1
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}else{
alert("已经最大了!");
}
},
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("已经最小啦!");
}
}
}
})
</script>
</body>
</html>
有用的话点个赞哈~~