事件监听处理---二级联动菜单

最新推荐文章于 2024-05-31 10:47:24 发布

m0_47761892

最新推荐文章于 2024-05-31 10:47:24 发布

阅读量473

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_47761892/article/details/128789402

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事件处理

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“methodName” 或 @click=“handler”。
事件处理器的值可以是：

1.内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

		<button @click="count++">Add 1</button>
		<p>Count is: {{ count }}</p>

2.方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

<button @click="greet">Greet</button>

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：
.stop
.prevent
.self
.capture
.once
.passive

按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

Vue 为一些常用的按键提供了别名：

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

.ctrl
.alt
.shift
.meta

鼠标按键修饰符#

.left
.right
.middle

事件监听处理的简单例子—二级联动菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件处理</title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript"></script>
		<style type="text/css">
		
		</style>
	</head>
	<body>
		<div id="app">
			<button v-on:click="show">显示</button>
			<p>按钮单击了{{count}}次</p>
			
			<form name="form">
				<select v-model="ptext">
					<option value="文具">文具</option>
					<option v-for="pmenu in menulist" :value="pmenu.text">
						{{pmenu.text}}
					</option>
				</select>
				<select >
					<option v-for="submenu in getsubmenu" :value="submenu.text">
						{{submenu.text}}
					</option>
				</select>
			</form>
			<img id="pic" src="img/1.jpg" v-on:mouseover="vis(1,$event)" v-on:mouseout="vis(0,$event)" >
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					ptext:'',
					count:0,
					menulist:[
						{text:'数码设备',
						submenu:[{text:'数码相机'},{text:'打印机'},{text:'复印机'}],
						},
						{text:'家用电器',
						submenu:[{text:'电视机'},{text:'电冰箱'},{text:'洗衣机'}],
						},
						{text:'礼品工艺',
						submenu:[{text:'鲜花'},{text:'彩带'},{text:'音乐盒'}],
						}
					]
				},
				computed:{
					getsubmenu(){
						for(var i=0;i<this.menulist.length;i++){
							if(this.menulist[i].text==this.ptext)
								return this.menulist[i].submenu
						}
					}
				},
				methods:{
					// getPtext(event){
					// 	 this.ptext=event.target.value;
					// },
					show:function(){
						this.count++;
					},
					vis(i,e){
						var style=e.target.style
						if(i==0){
							style.border='';
							style.opacity=1;
						}
						else{
							style.border='2px solid red';
							style.opacity=0.5;
						}
					}
				}
			})
			Vue.config.devtools=true;
		</script>
	</body>
</html>