Vue_事件处理和修饰符

最新推荐文章于 2023-12-14 21:52:54 发布

LRight-T

最新推荐文章于 2023-12-14 21:52:54 发布

阅读量119

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_44604924/article/details/108785643

版权

本文详细介绍了Vue.js中的事件处理机制，包括使用v-on或@符号绑定事件及事件修饰符的运用，如.stop和.prevent。通过示例展示了如何阻止事件冒泡、取消默认行为以及监听特定按键。此外，还演示了在实际应用中如何通过事件来更新数据，如商品数量的增减。

摘要由CSDN通过智能技术生成

vue的事件处理：可以使用v-on来进行事件处理，例如：v-on:click=“XXX” 也可以简写为：@click=“XXX”，@keyup=“XXX”
vue的事件修饰符：例如原生js中的停止冒泡：event.stopPropagation(); 和阻止默认事件发生:：event.preventDefault(); 在vue.js中可以使用如下方式：停止冒泡： @click.stop=“XXX”, 阻止默认事件发生：@click.prevent=“XXX”,其中stop和prevent就是事件修饰符；除此之外还有@keyup.enter：enter键按下…
event.target指向发生该事件的元素。
相关示例：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var app  = new Vue({
                el:"#app",
                data() {
                    return {
                        prices:[
                            {price:10,count:0},
                            {price:20,count:0},
                            {price:30,count:0},
                            {price:40,count:0},
                            {price:50,count:0},
                        ]
                    }
                },
                methods: {
                    test1:function(event){
                      alert(event.target.innerHTML);
                    },
                    test2:function(){
                        alert("out");
                    },
                    // test3(event){
                    test3(){
                        // event.stopPropagation();//原生js做法
                        
                        alert("inner");
                    },
                    // test4(event){
                    test4(){
                        // event.preventDefault();
                        
                        alert("点击了");
                    },
                    test5(event){
                        alert(event.target.value);
                    },
                    add:function(item,$event){
                        item.count++;
                    },
                    sub:function(item,$event){
                        item.count--;
                    },
                },
            });
        };
    </script>
</head>
<body>
    <div id="app">
        <button @click="test1($event)">获取文本值</button> <!--不传$event也可以-->
        <h2>事件修饰符</h2>
   <div @click="test2" style="width: 200px;height: 200px;background-color: brown;"><!--会产生事件冒泡-->
    <div @click.stop="test3" style="width: 100px;height: 100px;background-color: blue;"></div><!--直接stop阻止冒泡-->
   </div>
   <a href="http://www.baidu.com" @click.prevent="test4">去百度</a><!--取消事件的1默认行为-->
    <h2>按键修饰符</h2>  
    <input type="text" @keyup.enter="test5">  
    <ul>
        <li v-for="(item,index) in prices">
            价格：{{item.price}}
           
           数量： <button @click="add(item)">+</button>{{item.count}}
            <button v-on:click="sub(item)">-</button>
        </li>
    </ul>
</div>
   
</body>