v-on

最新推荐文章于 2022-06-29 10:32:31 发布
最新推荐文章于 2022-06-29 10:32:31 发布
阅读量143 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48771583/article/details/109487285
版权

.stop 阻止冒泡行为

html:

<h2>阻止冒泡行为</h2>
	<div class="item" @click="click1">
		<div class="inside" @click.stop="click2">
			<div @click.stop="click3" class="iin"></div>
		</div>
    </div>

vue ：

methods:{
					click1(){
						alert(1);
					},
					click2(){
						alert(2);
					},
					click3(){
						alert(3);
					},				
		}

效果：点击.iin只会弹3，点击.inside只会弹2,点击item只会弹1

.prevent 阻止默认行为

html:

<!-- 阻止默认事件 -->
	<input type="checkbox"  @click.prevent />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKJQoKvN-1604461013847)(C:\Users\pmq0102\AppData\Roaming\Typora\typora-user-images\image-20201104093146288.png)]

效果：无论怎么点击复选框勾选不上

:keypress 键盘按下事件

html:

<!-- 键盘事件 -->
<input type="text"  v-on:keypress="keyPress($event)" />

vue:

methods:{				
					keyPress(e){
						console.log(e.keyCode)
					}
				}

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-miIZ2Szu-1604461013850)(C:\Users\pmq0102\AppData\Roaming\Typora\typora-user-images\image-20201104093806215.png)]

.capture 冒泡时优先处理拥有此属性的指令

html:

<!-- 优先处理被capture选中的事件 -->
	<div class="item" @click.capture="click1">
		<div class="inside" @click="click2">
			<div @click="click3" class="iin"></div>
		</div>
	</div>

vue:

methods:{
					click1(){
						alert(1);
					},
					click2(){
						alert(2);
					},
					click3(){
						alert(3);
					},
				}

效果：

无论点击哪个div，都先弹出1

用vue v-on实现点击相应的按钮，改变字体的颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.one{
				color: red;
			}
			.two{
				color: green;
			}
			.three{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" v-on:click="changeColor('red')">红色</button>
			<button type="button" v-on:click="changeColor('green')">绿色</button>
			<button type="button" v-on:click="changeColor('blue')">蓝色</button>
			<div v-bind:style="{color:colorType}">{{msg}}</div>
			
			<!-- <div v-bind:class="{one:red,two:green,three:blue}">{{msg}}</div> -->
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					msg:'你好',
					colorType:'#000',
					red:true,
					green:true,
					blue:false
				},
				methods:{
					changeColor(color){
						this.colorType = color;
						// if(color == 'red'){
						// 	this.red = true,
						// 	this.green = false,
						// 	this.blue = false
						// }else if(color == 'green'){
						// 	this.red = false,
						// 	this.green = true,
						// 	this.blue = false
						// }else if(color == 'blue'){
						// 	this.red = false,
						// 	this.green = false,
						// 	this.blue = true
						// }
					}
				}
			})
		</script>
	</body>
</html>

效果：点击相应颜色的按钮，字体颜色随之相应改变

在这里插入图片描述

大大大琪123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 实现鼠标指向文字变色
weixin_35756624的博客
01-03 1602
Vue 提供了内置的指令来响应 DOM 事件，你可以使用 v-on 指令在元素上绑定事件监听器。 在这个例子中，我们可以使用 v-on:mouseover 指令来监听鼠标指向元素的事件，然后在监听器中改变元素的样式来实现鼠标指向文字变色的效果。 下面是一个简单的例子： <template> <div v-on:mouseover="changeColor"> 鼠...
Vue实现点击更改页面字体大小
hhmmj的博客
07-26 2337
Vue实现点击更改页面字体大小
vue的v-on指令的修饰符
qq_44788119的博客
05-08 252
vue的v-on指令的修饰符 stop：阻止事件冒泡 capture:设置捕获事件（在父级元素上设置一个capture) self:只有自己的事件被促发了，才会执行 once:事件只执行一次 prevent:阻止默认事件 vue的键盘事件 键盘事件的链接 keyup:鼠标按下时 keydown:鼠标抬起时 keypress:按下抬起间促发 ...
Vue学习
An_1999的博客
10-12 257
Vue学习2019/10/12 （事件处理） 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。 <div id="app"> <div id="example-1"> <button v-on:click="counter += 1"> 数值 : {...
vue之v-on的键盘事件
qq_40844663的博客
03-21 814
<script src="./vue.js"></script> <div id="root"> <h1>{{name}}</h1> <h1>{{age}}</h1> <h1>{{skill}}</h1> <!-- <input type="text" placeholder="输入敲回车提示信息" @keyup.sp
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
Vue v-on v-model v-if 语法示例演示代码
最新发布
07-17
Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v...
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js学习笔记之v-bind和v-on解析
10-18
主要介绍了vue.js学习笔记之v-bind和v-on解析，v-bind 指令用于响应地更新 HTML 特征，v-on 指令用于监听DOM事件，文中还给大家提到了v-bind,v-on的缩写，感兴趣的朋友参考下吧
vue v-on监听事件详解
12-29
在vue.js中监听事件是通过v-on指令来实现的，先看一下简单的监听事件代码。 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> [removed][removed...
Vue内置指令——v-on（事件处理）
沐小侠
06-29 650
Vue.js提供了事件处理机制，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常情况下需要编写监听事件、事件处理方法、内联事件处理。
VUE基本语法
交小新的博客
04-12 327
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VUE入门案例</title> </head> <body> <!-- 入门案例步骤: 1.导入vue.js文件 html下部编辑 2.指定区域进行渲染 需要准备div vue.js代码 3.创建VUE.js对象 指定渲染区域
Vue之v-on修饰符之按键修饰符（011）
weixin_31707323的博客
04-11 162
Vue之v-on修饰符之按键修饰符 按键事件有： @keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起) 常用按键修饰符别名 别名修饰符 键值修饰符 对应按键 .delete .8/46 回格/删除 .tab .9 制表 .enter .13 回车 .esc .27 退出 .space .32 空格 .left .37 左 .up .38 上 .right .39 右 .down .40 下 还其它，一般我们不用
js的脚本事件控制
09-08 677
在使用JavaScript做WEB键盘事件侦听捕获时，主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。在一般情况下，采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中，会发现这几者有些不同的差别。        onkeypress事件不能对系统功能键(例如：后
OnKeyPress事件和Javascript检测键盘输入
weixin_30552811的博客
11-02 306
对于有些时候，我们需要检测用户键盘输入的键盘信息，来处理一些相应的事件。 这里田子建议使用OnKeyPress=“”事件来处理。相类似的还有OnKeyUp和OnKeyDown事件，这些田子个人认为都不是特别的理想化。 假如，我们预定义一个方法function EventCommand(oEvent){ document.write(oEvent.keyCode); }，这个方法用来显...
v-on指令详解
qq_45021462的博客
11-04 1752
获取点击事件元素本身 < button type=“button” @click=“click1($event)”>按钮< /button> methods : { click1() { …} } console.log(e);//返回一个鼠标事件对象MouseEvent。 console.log(e.target);//通过对象的target来获取触发事件的对象。 console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X。 &l.
2021-08-09 v-on设置键盘抬起事件(附:常见键盘事件和所有键位值)
GAARA
08-09 720
html <div id="app"> <input type="text" v-model="msg" v-on:keyup.enter="fn"/> </div> js var app = new Vue({ el: '#app', data: { msg:'' }, methods:{ fn(){ alert(this.msg);//文本框输入内容后回车,弹出框就弹出输入内容 } } }) ...
vue element-ui v-on:keyup.13事件 无效
renchaoqiong
04-25 2029
正常调用无效： v-on:keyup.13="handleInit" 添加上native覆盖element自己封装的@keyup事件就可以了。 v-on:keyup.native.13="handleInit" 比心～
Vue学习之路7-v-on指令学习之简单事件绑定
weixin_30827565的博客
07-24 109
前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象，事件对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态等。事件通常与函数结合使用，函数不会在事件发生前被执行。在JavaScript中常见的事件句柄（Event Handlers）主要有： 属性名 描述(对应事件发生在何时...) onabort 图像的加载...
v-on v-bind
08-16
v-on和v-bind是Vue.js中的两个指令。 v-on指令用于监听DOM事件并在触发时执行相应的方法。它的语法是v-on:事件名，比如v-on:click表示在点击事件发生时执行相应的方法。你也可以使用简写形式@:事件名来表示v-on指令。 例如，在模板中使用v-on指令监听按钮的点击事件： ```html <button v-on:click="handleClick">点击我</button> ``` 在Vue实例中，定义handleClick方法： ```javascript methods: { handleClick() { // 在这里处理点击事件 } } ``` v-bind指令用于动态绑定属性或表达式到HTML元素上。它的语法是v-bind:属性名，比如v-bind:href表示将动态绑定href属性的值。 例如，将一个动态的链接绑定到a标签的href属性上： ```html <a v-bind:href="dynamicLink">动态链接</a> ``` 在Vue实例中，定义dynamicLink属性： ```javascript data() { return { dynamicLink: 'https://www.example.com' } } ``` 这样，a标签的href属性将会被绑定为https://www.example.com。 v-bind还可以简写为:，例如: ```html <a :href="dynamicLink">动态链接</a> ``` 这样可以更加简洁地进行属性绑定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值