Vue.js：按键修饰符keyup,keyup.enter,keyup.alt.enter的使用

学习Vue.js第三天键盘事件keyup<label>你所在城市：</label><input type="text" v-on:keyup="City"/><label>你所在公司：</label><input type="text" v-on:keyup="Company"/><!--City,Company...

勤奋的树懒

39415人浏览 · 2019-06-23 19:58:30

勤奋的树懒 · 2019-06-23 19:58:30 发布

学习Vue.js第三天

键盘事件keyup

<label>你所在城市：</label><input type="text" v-on:keyup="City"/>
<label>你所在公司：</label><input type="text" v-on:keyup="Company"/>
<!--City,Company方法提示-->
City: function(){
					alert("你正在输入你所在的城市！");
				},
				Company: function(){
					alert("你正在输入你所在的公司！");
				}

只要你用键盘输出就会触发事件如下图：
在这里插入图片描述
回车才触发keyup.enter

<label>你所在城市：</label><input type="text" v-on:keyup.enter="City"/>
<label>你所在公司：</label><input type="text" v-on:keyup.enter="Company"/>

输入完城市和公司需要按Enter回车才触发事件如下图
在这里插入图片描述
还有种按alt+Enter才触发的修饰符：keyup.alt.enter

<label>你所在城市：</label><input type="text" v-on:keyup.alt.enter="City"/>
<label>你所在公司：</label><input type="text" v-on:keyup.alt.enter="Company"/>

全部代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Vue.js</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			#view {
				width: 500px;
				padding: 100px 20px;
				border: solid 1px lightsalmon;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="dcf">
			<!--{{}}起来的方法需要在方法后面加(),用""起来的可以不用-->
			<h1>{{monster()}}</h1>
			<!--直接{{}}里面放data里的属性就可以显示值了-->
			<p>我叫{{name}},今年{{age}}岁。</p>
			<!--单击事件-->
			<button v-on:click.once="{{age++}}">单击大一岁</button>
			<!--双击事件-->
			<button v-on:dblclick="{{age++}}">双击大一岁</button></br>
			</br>
			<!--如果直接href="blog"是不行的,F12也看见我们的链接显示的是href="blog"而不是href="https://blog.csdn.net/qq_42259469"-->
			<a v-bind:href="blog" v-on:click.prevent="alert()">博客链接</a>
			<!--鼠标事件,显示鼠标的X,Y轴-->
			<div id="view" v-on:mousemove=" updateXY ">{{x}},{{y}} -- <span v-on:mousemove.stop>停止</span></div>
			<!--嵌入b标签加粗-->
			<p v-html="Record ">{{time}}</p>
			<label>你所在城市：</label><input type="text" v-on:keyup.enter="City" />
			<label>你所在公司：</label><input type="text" v-on:keyup.enter="Company" />
		</div>
	</body>
	<script>
		new Vue({
			el: '#dcf',
			data: {
				name: 'Old Monster',
				age: '22',
				blog: 'https://blog.csdn.net/qq_42259469',
				Record: '<b>记录于2019</b>',
				x: 0,
				y: 0
			},
			methods: { //可以放多个方法
				monster: function() {
					return 'hello,Vue.js!!!';
				},
				updateXY: function(event) {
					this.x = event.offsetX; //获取鼠标X轴
					this.y = event.offsetY; //获取鼠标Y轴
				},
				alert: function() {
					alert("即将跳转到Old Monster的博客主页！");
				},
				City: function() {
					alert("你输入完城市并回车了！");
				},
				Company: function() {
					alert("你输入完公司并回车了！");
				}
			}
		});
	</script>

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