提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js计数器案例

VueJS案例 计数器
2023-09-27 14:22:47 时间

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>vue实例计数器</title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>当前基数：{{counter}}</h2>
			<!-- 简单实现 功能过多页面会变得复杂 -->
			<!-- <button v-on:click = "counter++">+</button> -->
			<!-- <button v-on:click = "counter--">-</button> -->
			<button v-on:click = "increase">+</button>
			<button @click = "decrease">-</button>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					counter:0
				},
				methods:{
					increase:function(){
						this.counter++;
						console.log("increase被触发");
					},
					decrease:function(){
						this.counter--;
						console.log("decrease被触发");
					}
				}
			})
		</script>
	</body>
</html>

网页效果

在这里插入图片描述
在这里插入图片描述

相关文章