Vue 计数器
Jihongchang(讨论 | 贡献)2023年6月8日 (四) 13:37的版本
https://www.bilibili.com/video/BV12J411m7MG/?p=10
<div class="input-num">
<button @click>-</button>
<span>{{}}</span>
<button @click>+</button>
</div>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){},
sub:function(){}
}
})
- data 中定义数据:比如 num
- methods 中添加两个方法:比如 add(递增),sub(递减)
- 使用 v-text 将 num 设置给 span 标签
- 使用 v-on 将 add, sub 分别绑定给 +,- 按钮
- 累加的逻辑:小于10累加,否则提示
- 递减的逻辑:大于0递减,否则提示