2. Vue prevent修饰符

Vue prevent修饰符

  • 概述

    prevent修饰符用于阻止默认事件的触发

  • 用法

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue prevent修饰符title>
    head>
    <body>
    <div id="app">
        <form action="www.baidu.com" method="get" @submit.prevent>
            <input type="text" value="用户名"><br>
            <input type="text" value="密码"><br>
            <input type="submit" value="提交" @click="submitBtn"><br>
        form>
        <br>
        <input type="button" value="按钮" @click.prevent="btnClick">
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        let app = new Vue({
            methods:{
                submitBtn(){
                    console.log('阻止了默认事件!')
                },
                btnClick(){
                    console.log('按钮默认事件')
                }
            },
        }).$mount("#app")
    script>
    body>
    html>
    

你可能感兴趣的:(4.,Vue,修饰符)