正在向全栈进发。。。。
代码：
<!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@2/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #9e9e9e3b;
}
#app {
width: 100px;
height: 150px;
margin: 100px auto;
box-shadow: darkgrey 2px 2px 2px 2px;
border-radius: 20px;
overflow: hidden;
}
#app div {
width: 100px;
height: 50px;
background-color: #fff;
line-height: 50px;
text-align: center;
}
#app button {
width: 100px;
height: 50px;
line-height: 50px;
background-color: #9e9e9e61;
display: inline-block;
border: none;
color: #ff5722;
font-size: 30px;
cursor: pointer;
}
#app button:hover {
background-color: #9e9e9eb3;
}
</style>
</head>
<body>
<div id="app">
<button @click="add">+</button>
<div><span v-text="num"></span></div>
<button @click="sub">-</button>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
num: 1,
},
methods: {
add: function () {
// 最高可以加到10
if (this.num < 10) {
this.num++;
} else {
alert("到顶了");
}
},
sub: function () {
// 最第可以减到0
if (this.num > 0) {
this.num--;
} else {
alert("到底了");
}
}
}
})
</script>
</body>
</html>
效果图:
