计数器效果图
实现
- 主要用到的指令有v-text、v-on。
- 基本框架显示框架是左右两个button,中间一个span标签。
- 逻辑就是写两个函数add,min分别设置为右左两个btn的单击事件。
- 事件绑定用到v-on:click的简写@click。
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小计数器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="sumApp">
<!--减按钮-->
<button @click="min">-</button>
<!--显示数量-->
<span>{{ curNum }}</span>
<!-- 加按钮 -->
<button @click="add">+</button>
</div>
<script>
var vu = new Vue({
el: "#sumApp", //挂载
data:{
curNum: 0
},
methods:{
// 添加函数
add: function(){
if(this.curNum>=10){
alert("已经到最大数目!!!");
}else{
this.curNum += 1;
}
},
//减数函数
min: function(){
if(this.curNum<=0){
alert("数量不能小于0!!!");
}else{
this.curNum -= 1;
}
}
}
});
</script>
</body>
</html>