文章目录
指令修饰符：就是通过 “.” 指明一些指令后缀，不同的后缀封装了不同的处理操作 —> 简化代码
一、按键修饰符
按键修饰符
@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>