zoukankan      html  css  js  c++  java
  • 3vue

    阻止冒泡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
    </head>
    <body>
        <!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数,
        如果事件绑定函数调用,那么事件对象必须作为最后一个参数$event显示传递 -->
        <div id = "app1">
            <div v-text="num"></div>
            <div v-on:click="handle0" >
                <button v-on:click="handle1">点击</button>
            </div>
            
        </div>
        <script src="vue.js"></script>
        <script>
            var vue1 = new Vue({
                el: '#app1',
                data:{
                    num:0
                },
                methods:{
                    handle0:function(){
                        this.num++;
                    },
                    handle1:function(event){
                        // event.stopPropagation();
                    },
                    
                }
            })
        </script>
    </body>
    </html>
    <button v-on:click="handle1">点击</button>改成
    <button v-on:click.stop="handle1">点击</button>
    就能等效上述阻止冒泡

    阻止默认行为

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
    </head>
    <body>
        <!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数,
        如果事件绑定函数调用,那么事件对象必须作为最后一个参数$event显示传递 -->
        <div id = "app1">
            <div>
                <a href="http://www.baidu.com" v-on:click.prevent="handle1">百度</a>
            </div>
            
        </div>
        <script src="vue.js"></script>
        <script>
            var vue1 = new Vue({
                el: '#app1',
                data:{
                    num:0
                },
                methods:{
                    handle1:function(event){
                        // event.preventDefault();
                    },
                    
                }
            })
        </script>
    </body>
    </html>

     按键修饰符

    v-on:keyup.enter='handleSubmit'

    v-on:keyup.delete='clearContent'

  • 相关阅读:
    软连接
    libmysqlclient.so.18 not found 的解决方法
    查找某个文件并全部删除
    sudo passwd root:没有相关指令
    智能解析套件
    日志类封装
    windows安装mysql
    xshell报错Socket error Event: 32 Error: 10053
    appium简明教程(8)——那些工具
    appium简明教程(7)——Desired Capabilities详解
  • 原文地址:https://www.cnblogs.com/gao-chao/p/13414857.html
Copyright © 2011-2022 走看看