VUE 方法
1、$event 变量
$event 变量用于访问原生DOM事件。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
点击次数：{{counter}}
<button @click="handleAdd(1,$evert)">+1</button>
<button @click="handleAdd(10,$evert)">+10</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
counter:
},
methods: {
handleAdd: function(counter, event) {
//阻止默认事件
event.preventDefault();
counter = counter || ;
this.counter += counter;
}
}
});
</script>
</body>
</html>2、修饰符
<!--阻止事件冒泡-->
<a @click.stop="handle()"></a>
<!--阻止默认事件-->
<a @click.prevent="handle()"></a>
<!--修饰符可以串联-->
<a @click.prevent.stop="handle()"></a>
<!--只有事件本身（而非子元素）触发-->
<a @click.self="handle()"></a>
<!--只触发一次，组件同样适用-->
<a @click.once="handle()"></a>
<!--键盘事件-->
<a @keyup.enter="handle()"></a>示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<!--阻止默认事件-->
<a @click.prevent="handle()" href="https://www.baidu.com/">https://www.baidu.com/</a>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
handle: function() {
console.log(1111)
}
}
});
</script>
</body>
</html> 相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21