Vue样式绑定&事件处理器

最新推荐文章于 2026-06-24 14:02:53 发布

原创最新推荐文章于 2026-06-24 14:02:53 发布 · 170 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

本文详细介绍了Vue.js中的样式绑定，包括字符串、数组和对象类型的样式绑定，并展示了事件处理器的使用，如事件修饰符（.stop, .prevent等）和按键修饰符（.enter, .tab等）。通过实例演示了如何在Vue应用中实现这些功能，帮助开发者更好地理解和运用Vue的响应式特性。

1. 样式绑定 (类型：字符串、数组、对象)

2. 事件处理器

2.1 事件修饰符

2.2 按键修饰符

1. 样式绑定 (类型：字符串、数组、对象)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>样式绑定</title>
		<!-- 引入vue.js文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 设置样式 -->
		<style>
			.c1{
				font-family: 华文行楷;
			}
			.c2{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="vue">
			<!-- 样式绑定 -->
			<!-- 样式绑定-字符串  -->
			<h3 v-bind:class="c1">绑定样式-字符串</h3>
			<!-- 绑定样式-数组 -->
			<h3 v-bind:class="c1s">绑定样式-数组</h3>
			<!-- 绑定样式-对象 -->
			<h3 :style="dx">绑定样式-对象</h3>
		</div>
	</body>
	<script type="text/javascript">
		//实例一个vue
		new Vue({
			el:"#vue",//挂载区域
			data:function(){//定义属性
				return {
					c1:'c1',
					c1s:['c1','c2'],
					dx:{
						fontSize:"20px",
						color:"green"
					}
				}
			}
		})
	</script>
</html>

2. 事件处理器

2.1 事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件修饰符</title>
		<!-- 引入vue.js文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="vue">
			<!-- 事件修饰符 -->
			<!-- 提交事件不再重载页面 -->
			<form action="userAction.action" v-on:submit.prevent="onSubmit" method="post">
				<input type="text" />&nbsp;<input type="submit" value="提交事件不再重载页面" />
			</form>
			<!-- 阻止单击事件冒泡 -->
			<a href="#" v-on:click.once ="doThis">阻止单击事件冒泡</a>
		</div>
	</body>
	<script type="text/javascript">
		//实例一个vue
		new Vue({
			el:"#vue",//挂载区域
			methods:{//定义方法
				onSubmit:function(){
					console.info("onSubmit...")
				},
				doThis:function(){
					console.info("doThis...")
				}
			}
		})
	</script>
</html>

Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once


<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

<a v-on:click.once="doThis"></a>

2.2 按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>按键修饰符</title>
		<!-- 引入vue.js文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="vue">
			<!-- 按键修饰符 -->
			<form action="userAction.action" method="post">
				<input v-on:keyup.enter="submit">
			</form>
		</div>
	</body>
	<script type="text/javascript">
		//实例一个vue
		new Vue({
			el:"#vue"//挂载区域
		})
	</script>
</html>

Vue允许为v-on在监听键盘事件时添加按键修饰符：


<input v-on:keyup.13="submit">

Vue为最常用的按键提供了别名

<input v-on:keyup.enter="submit">

全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta