Vue 时间修饰符之使用$event和prevent修饰符操作表单

Posted 2020-11-15 tommymarc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 时间修饰符之使用$event和prevent修饰符操作表单相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->

    <!--<form action="">-->

    <!--<form action="" @submit="post(‘简单记录‘)">-->

    <!--<form action="" @submit="post_event(‘简单记录‘,$event)">-->

    <form action="" @submit.prevent="prevent_post(‘简单记录‘)">

        <h1>{{date}}</h1>

        <button>提交</button>
    </form>
</div>
<script>
    var vue = function (options){new Vue(options)};
    vue({
        el:‘#title‘,
        data:{
            title:‘Vue 时间修饰符之使用$event和prevent修饰符操作表单‘
        }
    });
    var app = vue({
        el:‘#ask‘,
        data:{
            date:new Date()
        },
        methods:{
            //会刷新页面
            post(data){
                alert(data)
            },
            //不会刷新页面
            post_event(data,event){
                event.preventDefault();//禁用浏览器默认事件
                alert(data)
            },
            //不会刷新页面
            prevent_post(data){
                alert(data)
            }
        }
    });

</script>
</body>
</html>

以上是关于Vue 时间修饰符之使用$event和prevent修饰符操作表单的主要内容，如果未能解决你的问题，请参考以下文章

java访问控制修饰符之default

浅析java修饰符之public default protected private static final abstract