vue.js 点击按钮自增案例的三种方法

最新推荐文章于 2024-08-16 07:34:20 发布

天马行空zqzq

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量2.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_42039912/article/details/107146351

版权


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 方法1 -->
	<!-- <div id="app">
		<input type="text" v-model="number">
		内联事件
		<button onclick="jia()">点击+1</button>
	</div> -->
	// <script src="node_modules/vue/dist/vue.js"></script>
	// <script>
	// 	var app = new Vue ({
	// 		el: '#app',
	// 		data: {
	// 			number: 1
	// 		}
	// 	})
	// 	//这种方法不好，app的名字是会变的，不好维护
	// 	function jia () {
	// 		app.number++
	// 	}
	// </script>




	<!-- <div id="app">
		<input type="text" v-model="number">
		内联事件
		vue提供的点击事件，这种方式适用于事件很简单
		<button v-on:click="number++">点击+1</button>
	</div> -->
	<script src="node_modules/vue/dist/vue.js"></script>
	<script>
		/*var app = new Vue ({
			el: '#app',
			data: {
				number: 1
			}
		})*/
		
	</script>


	<!-- 方法3 事件比较复杂，直接放在vue模板里面-->
	<div id="app">
		<input type="text" v-model="number">
		<!-- 内联事件 -->
		<!-- vue提供的点击事件，这种方式适用于事件很简单 -->
		<button v-on:click="jia()">点击+1</button>
	</div>
	<script src="node_modules/vue/dist/vue.js"></script>
	<script>
		var app = new Vue ({
			el: '#app',
			data: {
				number: 1
			},
			methods: {
				jia: function () {
					this.number++
				}
			}
		})
		
	</script>
</body>
</html>