vue使用once修饰符,使事件只能触发一次问题

vue使用once修饰符,使事件只能触发一次问题

目录

once修饰符,使事件只能触发一次

vue事件修饰符(once:prev:stop)

注释说的很详细

once修饰符,使事件只能触发一次

多个修饰符可以同步使用

<!--定义vue的操作对象--> <div id="app">     <!-- 使用self修饰符 点击标签自身时才会执行事件 -->     <!-- 使用once修饰符 使事件只能触发一次  -->     <!-- 多个修饰符可以同时使用   -->     <div class="inner" @click.self.once="divClick">         <input type="button" value="点击" @click="butClick">     </div> </div> <!--导入vue.js--> <script src="./vue.js"></script> <script>     //创建一个vue实例     var vm = new Vue({         el:"#app", //指定实例控制的DOM元素         data:{ //存储页面数据         },         methods:{ //在此处定义实例可用的所有方法             divClick(){                 console.log('div点击事件')             },             butClick(){                 console.log('button点击事件')             }         }     }) </script> vue事件修饰符(once:prev:stop)

附有同一文件夹下的html文件、js文件和css文件

注释说的很详细

index.html的代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <link rel="stylesheet" href="style.css" rel="external nofollow" > <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--vue-app是根容器--> <div id="vue-app"> <h1>Event</h1> <button @click.once="add(1)">单击涨一岁</button> <button v-on:click="subtract(1)">单击减一岁</button> <button @dblclick="add(10)">双击涨十岁</button> <button v-on:dblclick="subtract(10)">双击减十岁</button> <p>My age is {{age}}</p> <div id="canvas" v-on:mousemove="updateXY"> {{x}},{{y}} - <span v-on:mousemove="stopMoving">Stop Moving</span> <br> <span v-on:mousemove.stop="">Stop Moving</span> </div> <a v-on:click="alert()" href="https://blog.csdn.net/qq_40647912" rel="external nofollow" rel="external nofollow" >baidu</a> <br> <a v-on:click.prevent="alert()" href="https://blog.csdn.net/qq_40647912" rel="external nofollow" rel="external nofollow" >baidu</a> </div> </div> <script src="app.js"></script> </body> </html>

app.js的代码

//实例化VUE对象 new Vue({ el:"#vue-app", //仅限于在vue-app容器下 data:{ age:30, x:0, y:0 }, methods:{ add:function(inc){ this.age += inc; }, subtract:function(dec){ this.age -= dec; }, updateXY:function(event){ this.x = event.offsetX; this.y = event.offsetY; }, stopMoving:function(event){ event.stopPropagation(); }, alert:function(){ alert("Hellow world !"); } } });

style.css代码

#canvas{ width: 600px; padding: 200px 20px; text-align: center; border: 1px solid #333; }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读