html样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
<link rel="stylesheet" href="./计数器.css">
</head>
<body>
<div id="app">
<div class="input-num">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 创建vue实例
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
// 递增
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>
css样式
.input-num {
width: 200px;
height: 30px;
display: flex;
justify-content: space-around;
}
.input-num button{
width: 50px;
height: 30px;
background-color: blue;
border: none;
}
.input-num span{
width: 100px;
height: 30px;
background-color: rgb(160, 158, 158);
text-align: center;
line-height:30px;
}
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
