二、本地应用——利用事件绑定的计数器案例

最新推荐文章于 2025-01-14 20:57:26 发布

原创最新推荐文章于 2025-01-14 20:57:26 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

这个博客展示了一个使用Vue.js构建的简单计数器应用。代码中创建了一个Vue实例，绑定了数据属性`num`并定义了`add`和`sub`方法来增加或减少计数器的值，同时包含边界条件检查。用户界面由两个按钮和一个显示数字的`span`组成，点击按钮会触发相应的方法更新数值。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<button @click="sub()">
					-
				</button>
				<span>{{ num }}</span>
				<button @click="add()">
					+
				</button>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				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>