1.事件修饰符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> </head> <body> <div id="app01"> <ul @click="event_1"> <!-- 事件修饰符：加上后可以阻止冒泡，即只触发子标签上面的事件，不处罚父标签上面的事件 --> <li @click.stop="event_2">123</li> </ul> <!-- 事件修饰符：只有当点击到标签自己时才会处罚事件，点击子标签不会触发事件 --> <ul @click.self="event_1"> <li>测试</li> <li>测试</li> <li>测试</li> </ul> <ul> <!-- 事件修饰符：只触发一次，再次点击不触发 --> <li @click.once="event_3">测试once</li> </ul> <!-- 事件修饰符：阻止默认行为，使超链接不跳转，而是执行event_3函数 --> <a href="http://www.baidu.com" @click.prevent="event_3">百度一下</a> </div> <script type="text/javascript"> let vm = new Vue({ el:"#app01", data:{ }, methods:{ event_1:function(){ console.log('事件1'); }, event_2:function(){ console.log("事件2"); }, event_3:function(){ console.log("事件3"); } } }) </script> </body> </html>
2.按键修饰符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> </head> <body> <div id="app01"> <!-- 按键修饰符：当输入内容后，按回车(enter)时触发，这里的修饰符可以用任何键的键值代替 --> <input type="text" name="" id="" value="" @keyup.enter="event_1"/> </div> <script type="text/javascript"> let vm = new Vue({ el:"#app01", methods:{ event_1:function(){ console.log('事件1'); } } }) </script> </body> </html>
3.表单修饰符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单修饰符</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app01"> <!-- 表单修饰符：当鼠标离开input标签时，同步数据 --> <input type="text" name="" id="" value="" v-model.lazy="my_text"/> {{my_text}} <!-- 表单修饰符：去除输入内容的开头和结尾的空格 --> <input type="text" name="" id="" value="" v-model.trim="my_username"/> |{{my_username}}| </div> <script type="text/javascript"> let vm = new Vue({ el:"#app01", data:{ my_text:'', my_username:'', } }) </script> </body> </html>