基于vue设计一个计数器
文章目录
开发工具:HBuilder X(官网可下载)
1 首先根据设计要求,准备所需要的元素
2 然后针对元素的对应的操作,定义data,以及对应的方法
设计出大概的框架
3 将方法对应的数据操作细致的写道程序中,并且增加Button按钮执行的动作。
测试按钮是否关联对应的方法
add:function(){
//首先测试按钮是否关联
console.log("add")
},
sub:function(){
console.log("sub")
}
看到当点击的时候,对应输出了方法的调用add和sub
4 检测成功,然后完整实现对应的代码
计数器最小只能为0,小于0弹窗警告;最大值为10,大于10弹窗警告
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设计一个计数器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- <link rel="stylesheet" href="./css/index.css" /> -->
</head>
<body>
<div id="app">
<div class="input-num">
<button @click="add()">+</button>
<span>{{num}}</span>
<button @click="sub()">-</button>
</div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
num:1 //初始化的数值显示1,同时用于测试,放入span中
},
methods:{
//根据计数器的功能,增加,减少分别定义函数add sub
add:function(){
//首先测试按钮是否关联
//console.log("add")
if(this.num<10)
{
this.num++;
}else{
alert("别点了,最大了!");
}
},
sub:function(){
//console.log("sub")
if(this.num>0)
{
this.num--;
}else{
alert("别点了,最小了!");
}
}
}
})
</script>
</body>
</html>
至此,由两个按钮,和一个span设计的计数器完成