“Vue 计数器”的版本间的差异
		
		
		
		
		
		跳到导航
		跳到搜索
		
				
		
		
	
Jihongchang(讨论 | 贡献)  | 
				Jihongchang(讨论 | 贡献)   | 
				||
| 第21行: | 第21行: | ||
# methods 中添加两个方法:比如 <u>add</u>(递增),<u>sub</u>(递减)  | # methods 中添加两个方法:比如 <u>add</u>(递增),<u>sub</u>(递减)  | ||
# 使用 <u>v-text</u> 将 <u>num</u> 设置给 <u>span</u> 标签  | # 使用 <u>v-text</u> 将 <u>num</u> 设置给 <u>span</u> 标签  | ||
| + | # 使用 <u>v-on</u> 将 <u>add</u>, <u>sub</u> 分别绑定给 <u>+</u>,<u>-</u> 按钮  | ||
| + | # 累加的逻辑:小于<u>10</u>累加,否则提示  | ||
| + | # 递减的逻辑:大于<u>0</u>递减,否则提示  | ||
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递减,否则提示