zoukankan      html  css  js  c++  java
  • vue事件处理

    1. 绑定监视

    2. 事件修饰符

    3. 按键修饰符

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    <body>
    <!--列表过滤与排序-->
    <div id="demo">
        <h2>绑定监听</h2>
        <button @click="test1">test1</button>
        <button @click="test2(123)">test2</button>
        <button @click="test3">test3</button>  <!-- 无参函数,实际上是传了$event对象-->
        <button @click="test4(1234,$event)">test4</button>
    
        <h2>事件修饰符</h2>
        <!--存在事件冒泡的情况-->
        <h3>阻止事件冒泡</h3>
        <div style=" 200px; height: 200px; background: red" @click="test5">
            <!--@click.stop 停止事件冒泡 -->
            <div style=" 100px; height: 100px; background: blue" @click.stop="test6"></div>
        </div>
    
        <br>
        <h3>阻止事件的默认行为</h3>
        <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
    
    
        <br>
        <h2>按键修饰符</h2>
        <!-- <input type="text" @keyup="test8">-->  <!--原始写法-->
        <!--<input type="text" @keyup.13="test8">-->  <!--13就是enter键的keyCode码-->
        <input type="text" @keyup.enter="test8"/>   <!--直接写名字-->
    
    </div>
    <script type="text/javascript" src="lib/vue.min.js"></script>
    <script>
        new Vue({
            el: "#demo",
            methods: {
                test1(){
                    alert('test1');
                },
                test2(number){
                    alert(number);
                },
                test3(event){
                    alert(event.target.innerHTML);
                },
                test4(number, event){
                    alert(number + '----' + event.target.innerHTML);
                },
                test5(){
                    alert('out')
                },
                test6(){
                    alert('inner')
                },
                test7(){
    //                event.preventDefault()   //原生的方式阻止事件的默认行为
                    alert('点击,但是通过@click.prevent阻止事件的默认行为,不会跳转到百度去了')
                },
                test8(event){
    //                原始写法;
    //                if (event.keyCode === 13){  // Enter键
    //                    alert(event.target.value)
    //                }
                    alert(event.target.value)
    
                }
    
            }
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    PHP chop() 函数
    PHP bin2hex() 函数
    多个表关联或者有视图套视图,快速检查SQL语句中所有的表统计信息是否过期
    洛谷P3628 [APIO2010]特别行动队 斜率优化
    洛谷P3195 [HNOI2008]玩具装箱TOY 斜率优化
    bzoj4282 慎二的随机数列 树状数组求LIS + 构造
    校园网 入读统计 + 性质分析
    HAOI2006 受欢迎的牛 缩点
    普通平衡树 Treap
    洛谷P1563 玩具谜题 简单模拟
  • 原文地址:https://www.cnblogs.com/z-qinfeng/p/12392487.html
Copyright © 2011-2022 走看看