千峰商城-springboot项目搭建-28-vue事件修饰符

当使用v-on进行事件绑定的时候，可以添加特定后缀，设置事件触发的特性

 

<button type="submit" @click.prevent="事件函数">测试</button>

 

.prevent：消除元素的默认操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <form action="https://www.baidu.com">
                <!--.prevent：消除元素的默认操作-->
                <button type="submit" class="btn btn-success btn-xs" @click.prevent="test">测试</button>

            </form>                            
        </div>        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{               
            },
                methods:{
                    test:function(event){
                        console.log("-------test")
                    } 
                }
            });
        </script>  
    </body>
</html>

 

.stop 阻止事件冒泡（阻止子标签向上冒泡）

.self 设置只能自己触发事件，子标签不能触发

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <form action="https://www.baidu.com">
                <!--.prevent：消除元素的默认操作-->
                <button type="submit" class="btn btn-success btn-xs" @click.prevent="test">测试</button>
            </form>
            
            <div style="width: 200px;height: 200px; background: red;" @click.self="method1">
                <div style="width: 150px;height: 150px; background: green;" @click="method2">
                    <button type="button" @click.stop="method3">测试</button>
                </div>
            </div>
                            
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    
            },
                methods:{
                    
                    test:function(event){
                        console.log("-------test")
                    },
                    method1:function(){
                        alert("1");
                    },
                    method2:function(){
                        alert("2");
                    },
                    method3:function(){
                        alert("3");
                    }
                    
                }
            });
        </script>
        
    </body>
</html>

 

 

 v-once 限定事件只触发一次

 

 

 
 
posted @ 2022-07-08 18:05  临易  阅读(13)  评论(0)  编辑  收藏  举报