用Vue实现计数器

最新推荐文章于 2024-05-14 22:24:22 发布

朱振玉小迷弟

最新推荐文章于 2024-05-14 22:24:22 发布

阅读量968

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： vue javascript js

本文链接：https://blog.csdn.net/weixin_50357864/article/details/114787476

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

如何用Vue实现一个计数器？

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>本地应用-计数器</title>
	</head>
	<body>
		<!-- html结构 -->
		<div id="app">
			<!--计数器功能区域-->
			<div class="input-num">
				<button v-on:click="sub()">
					-
				</button>
				<span>{{ num }}</span>
				<button @click="add()">
					+
				</button>
			</div>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",	//注意这里的逗号，如果忘记打这个逗号了，下面的num不显示数据，别问我怎么知道的
				data:{
					num:1
				},
				methods:{
					add:function(){
						if(this.num<10){
							this.num++;
						}else{
							alert("已经最大了！");
						}
					},
					sub:function(){
						if(this.num>0){
							this.num--;
						}else{
							alert("已经最小啦！");
						}
					}
				}
			})
		</script>
	</body>
</html>

有用的话点个赞哈~~

朱振玉小迷弟

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用Vue实现计数器

如何用Vue实现一个计数器？源码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>本地应用-计数器</title> </head> <body>  <div id="app">  <div class="i
复制链接

扫一扫

专栏目录