本文主要是介绍《风尚坐火箭学习vue》-- 第四章：用Vue实现计数器功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

第四章：用Vue实现计数器功能

上章回顾：风尚一听，学！为了干饭！！！

好家伙，为了干饭，风尚一听急了，别说了，开整，先整个老头没说的，整个计数器吧，让老头看看我的本事。

二话不说，风尚打开了HBuilderX 软件，引入了本地版的vue.js文件，风尚一切准备就绪后傻眼了，在页面里一写dom操作就报错，这是咋回事，vue.js不是js嘛？让风尚傻眼了。风尚急得直跺脚，这不行啊。不能让老头小看我。于是乎打开了度娘。

经过风尚看了半天，劈里啪啦写下了HTML如下：

<div id="app">
			<hr >
			<!-- //计数器 -->
			
			<h2>计数器普通{{num}}</h2>
			<button @click="num++">+</button>
			<button  @click="num--">-</button>
			<hr >
			
			
			<h2>计数器函数{{num1}}</h2>
			<button @click="add">+</button>
			<button  @click="sub">-</button>
			<hr >
		</div>

js如下： 

<script type="text/javascript">
		const vm =new Vue({
			el:"#app",
			data(){
				return{
					
				// 计数器
					num:0,
					num1:0,
				}
			},
			//定义方法
			methods:{
				// 计数加
				add(){
					this.num1++;
					if(this.num1>10){
						this.num1=1
					}
					console.log('add')
					},
					// 计数减
				sub(){
					this.num1--;
					if(this.num1<0){
						this.num1=0
					}
					console.log('sub')
					}
			
			}
			
		}) 
	</script>

效果图：

 实现了点击+1，点击-1 计数器效果。

”累死我了，干就完了，吃饭去了0.0“

欲知后事如何，请看下章

这篇关于《风尚坐火箭学习vue》-- 第四章：用Vue实现计数器功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！