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

​

 

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue