Vue.js计数器实战教程-优快云博客

本文链接：https://blog.youkuaiyun.com/k_0101/article/details/109954327

本文通过一个简单的Vue计数器案例，介绍如何使用Vue的`v-on:click`指令和`methods`属性实现点击事件。案例详细阐述了代码实例及成功运行的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-计数器案例

前提

案例中需要需要认识的属性和指令

指令：v-on:click

<button v-on:click="方法名">+</button>

官方解释：为了让用户和你的应用进行交互，我们可以用 `v-on` 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

个人理解：该指令用于监听某个元素的点击事件，当点击事件发生时，执行某个方法(方法通常是在methods属性中定义的)

属性：methods

methods:{}

该属性用于在Vue对象中定义方法

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue</title>
</head>
<body>

	<div id="app">
		<h1>计数器案例</h1>
		<h2>{{count}}</h2>
		<button v-on:click="increment">+</button>
		<button v-on:click="decrement">-</button>
	</div>

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<script type="text/javascript">
		const app = new Vue({
			el: '#app',
			data: {
				count: 0
			},
			methods: {
				increment: function(){
					this.count++				
				},
				decrement: function(){
					if(this.count==0){
						this.count++
					}
					this.count--
				}
			}
		})
	</script>
</body>
</html>