vue事件处理

最新推荐文章于 2023-10-30 22:59:25 发布

虽千万人吾往矣

最新推荐文章于 2023-10-30 22:59:25 发布

阅读量247

点赞数

分类专栏： vue 文章标签： vue js event

本文链接：https://blog.csdn.net/weixin_44575660/article/details/107588735

版权

vue 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

绑定监听

vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，但是会有奇奇怪怪颜色的东西，如果有形参必须传event,此时通过$event指明实参event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件处理</title>
</head>
<body>

<div id="example">

  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {

    },
    methods: {
      test1(event) {
        alert(event.target.innerHTML)
      },
      test2 (msg) {
        alert(msg)
      },
      test3 (msg, event) {
        alert(msg+'---'+event.target.textContent)
      }
    }
  })
</script>
</body>
</html>

事件修饰符

通过click.prevent阻止事件的默认行为，通过click.stop阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>

<div id="example">

    <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
    </div>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {

        },
        methods: {

            test4 () {
                alert('点击了链接')
            },

            test5 () {
                alert('out')
            },
            test6 () {
                alert('inner')
            },
        }
    })
</script>
</body>
</html>

按键修饰符

@keyup对事件的抬起监听，通过不同的keycode可以处理不同的案件，可以通过有名字和keycode绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>

<div id="example">

    <input type="text" @keyup.13="test7">
    <input type="text" @keyup.enter="test7">

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {

        },
        methods: {
            
            test7 (event) {
                console.log(event.keyCode)
                alert(event.target.value)
            }
        }
    })
</script>
</body>
</html>

虽千万人吾往矣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue事件处理

绑定监听vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，但是会有奇奇怪怪颜色的东西，如果有形参必须传event,此时通过$event指明实参event<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件处理</title&g
复制链接

扫一扫