如何利用Vue制作一个简单的计数器

最新推荐文章于 2022-11-16 19:42:05 发布

朱振玉小迷弟

最新推荐文章于 2022-11-16 19:42:05 发布

阅读量861

点赞数 2

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

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

版权

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

16 篇文章 0 订阅

订阅专栏

一、思路

1、首先设置一个文本作为计数器的说明；
2、在文本附近设置两个按钮作为计数时使用；
3、设置一个el挂载点为两个按钮设置函数，即将数字加一或减一；
4、为两个按钮绑定设置好的函数；
5、完成。

二、源码

<!DOVTYPE>
<html>
	<head>
		<meta charset= "utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{counter}}</h2>
			<button v-on:click="add">+</button>
			<button v-on:click="sub">-</button>
		</div>
		<script src="js/vue.js"></script>	//引入vue文件
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					counter:0
				},
				methods:{
					add: function (){
						console.log("add被执行");
						this.counter++
						
					},
					sub: function (){
						console.log("sub被执行");
						this.counter--
					}
				}
			})
		</script>
	</body>
</html>

朱振玉小迷弟

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何利用Vue制作一个简单的计数器

一、思路1、首先设置一个文本作为计数器的说明；2、在文本附近设置两个按钮作为计数时使用；3、设置一个el挂载点为两个按钮设置函数，即将数字加一或减一；4、为两个按钮绑定设置好的函数；5、完成。二、源码<!DOVTYPE><html> <head> <meta charset= "utf-8"> <title></title> </head> <body> <div id="
复制链接

扫一扫