VUE---常见指令修饰符

Crystal_qwq

已于 2024-01-09 09:37:30 修改

阅读量444

点赞数 11

文章标签： vue.js 前端 javascript

于 2024-01-08 18:04:40 首次发布

本文链接：https://blog.csdn.net/m0_64498202/article/details/135463454

版权

本文介绍了如何在Vue.js应用中使用v-model修饰符（trim和number）进行数据绑定，并展示如何通过键盘事件监听和事件修饰符（stop和prevent）来控制组件行为，包括阻止冒泡和默认行为。

摘要由CSDN通过智能技术生成

<!--

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

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>