VUE---常见指令修饰符

2024-01-09 19:25:07

?

<!--

? ? 指令修饰符：‘.’指明一些指令后缀，不同后缀封装了不同的处理操作->简化代码

? ? 1.按键修饰符：@keyup.enter->键盘回车监听

? ? 2.v-model修饰符：v-model.trim->去掉首尾空格

? ? ? ? ? ? ? ? ? ? v-model.number->转数字

? ? 3.事件修饰符：@事件名.stop->阻止冒泡

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

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    .clock{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
    }
    .clock02{
        width: 100px;
        height: 100px;
        background-color: darksalmon;
        margin: auto;
    }
</style>

</head>

<!--
    指令修饰符：‘.’指明一些指令后缀，不同后缀封装了不同的处理操作->简化代码
    1.按键修饰符：@keyup.enter->键盘回车监听
    2.v-model修饰符：v-model.trim->去掉首尾空格
                    v-model.number->转数字
    3.事件修饰符：@事件名.stop->阻止冒泡
                 @事件名.prevent->阻止默认行为
-->

<body>
    
    <div id="app">
    <p>v-model修饰符 .trim .number</p>
    账号：<input type="text" placeholder="请输入内容" v-model.trim="uesrName" @keyup.enter="fn"><br>
    密码：<input type="text" placeholder="请输入内容" v-model.number="password" @keyup.enter="fn">
    <hr>@事件名.stop->阻止冒泡
        <div @click="fn02" class="clock">
            <div @click.stop="fn03" class="clock02">
            </div>
        </div>
    <hr>阻止链接默认行为
    <a @click.prevent href="https://www.baidu.com">阻止链接跳转</a>
    </div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            uesrName: '',
            password: '',
        },
        methods: {
            fn(){
                console.log('键盘回车监听', this.uesrName, this.password)
            },
            fn02(){
                alert('大方块')
            },
            fn03(){
                alert('小方块')
            }
        }
    })
</script>

</body>
</html>

文章来源:https://blog.csdn.net/m0_64498202/article/details/135463454
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。