vue案例：计数器

最新推荐文章于 2024-08-02 10:25:30 发布

郭圆圈

最新推荐文章于 2024-08-02 10:25:30 发布

阅读量968

点赞数

分类专栏： vue.js 文章标签： vue html

本文链接：https://blog.csdn.net/weixin_44225940/article/details/104112563

版权

vue.js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

用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>

郭圆圈

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue案例：计数器

用vue框架实现一个计数器，点击加按钮，计数器加1，点击减按钮，计数器减一 <body> <div id="app"> <h2>当前计数：{{count}}</h2> <button v-on:click="count++">+</button> <button v-on:click="count...
复制链接

扫一扫

专栏目录