<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin:0;
border: none;
}
html,body{
width: 100%;
height: 100%;
}
#center{
width: 130px;
height: 30px;
margin:100px auto;
line-height: 30px;
border-radius: 10px;
}
#box{
width: 150px;
}
#num{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px 15px;
box-sizing: border-box;
}
#remove,#add{
background-color: red;
text-align: center;
padding: 5px 15px;
border: 1px solid #ccc;
}
#remove{
border-radius: 7px 0 0 7px;
}
#add{
border-radius: 0 7px 7px 0 ;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="center">
<div id="box">
<span id="remove" @click="remove">-</span><span id="num">{{num}}</span><span id="add" @click="add">+</span>
</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
num:0
},
methods:{
remove:function(){
if(this.num>0){this.num --}
},
add:function(){
this.num ++
}
}
})
</script>
</body>
</html>
版权声明：本文为yfy538原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。