vue初体验，计数器练习

最新推荐文章于 2024-05-27 20:44:39 发布

HPF_99

最新推荐文章于 2024-05-27 20:44:39 发布

阅读量105

点赞数 1

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

本文链接：https://blog.csdn.net/HPF_99/article/details/112578254

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

引入vue.js
建一个Vue对象，传入id为count的进行绑定，在对象里面定义变量与方法
在外部使用{{}}取出vue中的值
v-on:click ：点击按钮调用的方法或者语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
	</head>
	<body>
		<div id="count">
			<div>当前计数个数：{{counter}}</div>
			<!-- <button v-on:click="counter++">+</button>
			<button v-on:click="counter--">-</button> -->
			<button v-on:click="add">+</button>
			<button v-on:click="sub">-</button>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var count = new Vue({
				el:"#count",
				data:{
					counter:0
				},
				methods:{
					add: function(){
						this.counter++;
					},
					sub: function(){
						this.counter--;
					}
				}
			})
		</script>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HPF_99

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue初体验，计数器练习

引入vue.js建一个Vue对象，传入id为count的进行绑定，在对象里面定义变量与方法在外部使用{{}}取出vue中的值v-on:click ：点击按钮调用的方法或者语句<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计数器</title> </head> <body> <div id="coun
复制链接

扫一扫