简易Vue.js入门简易计数器
Document
#app {
width: 480px;
height: 100px;
margin: 200px auto;
}
.input-num {
margin-top: 20px;
height: 100%;
display: flex;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 4px black;
}
.input-num button {
width: 150px;
height: 100%;
font-size: 40px;
color: gray;
cursor: pointer;
border: none;
outline: none;
}
.input-num span {
height: 100%;
font-size: 40px;
flex: 1;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 计数器 -->
<div class="input-num">
<button @click="sub()"> - </button>
<span>{{num}}</span>
<button @click="add()"> + </button>
</div>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
add() {
if (this.num < 10) {
this.num++
} else {
alert("别加了,数太大了")
}
},
sub() {
if (this.num > 0) {
this.num--
}else{
alert("别减了,数太小了")
}
}
},
})
</script>
</body>
