【Vue】指令修饰符
指令修饰符：就是通过 “.” 指明一些指令后缀，不同的后缀封装了不同的处理惩罚操纵 —> 简化代码一、按键修饰符
[*] 按键修饰符
@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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]