【Vue】指令修饰符

文章目录

一、按键修饰符
二、v-model修饰符
三、事件修饰符

指令修饰符：就是通过 “.” 指明一些指令后缀，不同的后缀封装了不同的处理操作 —> 简化代码

一、按键修饰符

按键修饰符

@keyup.enter —>当点击enter键的时候才触发
v-model修饰符

v-model.trim —>去除首尾空格

v-model.number —>转数字
事件修饰符

@事件名.stop —>阻止冒泡

@事件名.prevent —>阻止默认行为

代码演示：

<body><div id="app"><h3>@keyup.enter  →  监听键盘回车事件</h3><!-- --><input @keyup.enter="fn" v-model="username" type="text"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: ''},methods: {fn (e) {// if (e.key === 'Enter') {//   console.log('键盘回车的时候触发', this.username)// }console.log('键盘回车的时候触发', this.username)}}})</script>
</body>

二、v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

如果遇到转不了数字的，如abc，它就会留在原地，此时需要自行判断，但如果是汉字，就会截取汉字之前的数字，无论怎么样它都不会产生NaN

<body><div id="app"><h3>v-model修饰符 .trim .number</h3>姓名：<input v-model.trim="username" type="text"><br>年纪：<input v-model.number="age" type="text"><br><script src="./vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',})</script>
</body>

三、事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

<body><div id="app"><h3>@事件名.stop → 阻止冒泡</h3><div @click="fatherFn" class="father"><div @click.stop="sonFn" class="son">儿子</div></div><h3>@事件名.prevent → 阻止默认行为</h3><a @click.prevent href="http://www.baidu.com">阻止默认行为</a></div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',data: {},methods: {fatherFn() {alert('老父亲被点击了')},sonFn() {alert('儿子被点击了')}}})</script>
</body>