孙空空的Vue之路-Day07-事件处理
程序员文章站
2022-03-20 19:11:39
事件处理 事件处理
绑定监听操作
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="demo">
<h3>绑定监听操作</h3>
<button @click="demo01">demo01</button>
<button @click="demo02(123)">demo02</button>
<button @click="demo03(123,$event)">demo03</button>
<h3>事件修饰符</h3>
<div style="width: 200px;height: 200px;background: #ff7a55" @click="demo05">
<!--嵌套形式的Div可以这样使用-->
<div style="width: 100px;height: 100px;background: #6073ff" @click.stop="demo06"></div>
</div>
<!--阻止链接跳转-->
<a href="http://www.baidu.com" @click.prevent="demo04">Baidu</a>
<h3>按键修饰符</h3>
<input type="text" @keyup.enter="demo07">按enter触发</input><br>
<input type="text" @keyup.space="demo08">按space(空格)触发</input>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
demo01(event) {
alert(event.target.innerHTML)
},
demo02(value) {
alert(value)
},
demo03(value,event) {
alert(value + '---' + event.target.innerHTML)
},
demo04 (event) {
alert('event.target.innerHTML : ' + event.target.innerHTML)
},
demo05 () {
alert('out')
},
demo06 () {
alert('inner')
},
demo07 (event) {
alert(event.target.value)
},
demo08 (event) {
alert(event.target.value)
}
}
})
</script>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_38817451/article/details/109252979
上一篇： Python实现简易购物车(未完结)
下一篇： AngularJS 中的事件详解