vue案例:计数器

用vue框架实现一个计数器,点击加按钮,计数器加1,点击减按钮,计数器减一

	<body>
		<div id="app">
			<h2>当前计数:{{count}}</h2>
			<button v-on:click="count++">+</button>
			<button v-on:click="count--">-</button>
		</div>
	</body>
	<script>
		const app=new Vue({
			el:'#app',
			data:{
				count:0
			}
		})
	</script>

最终效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用函数:

	<body>
		<div id="app">
			<h2>当前计数:{{count}}</h2>
			<button v-on:click="add">+</button>
			<button v-on:click="sub">-</button>
		</div>
	</body>
	<script>
		const app=new Vue({
			el:'#app',
			data:{
				count:0
			},
			methods:{
				add: function(){
					this.count++;
				},
				sub:function(){
					this.count--;
				}
			}
		})
	</script>
发布了21 篇原创文章 · 获赞 0 · 访问量 331

猜你喜欢

转载自blog.csdn.net/weixin_44225940/article/details/104112563