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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><!-- <div id="app"><input t

天马行空zqzq

2834人浏览 · 2020-07-05 22:20:08

天马行空zqzq · 2020-07-05 22:20:08 发布


<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^