14.vue中prevent修饰符与条件指令

最新推荐文章于 2025-04-04 19:37:05 发布

gunsmoke

最新推荐文章于 2025-04-04 19:37:05 发布

阅读量611

点赞数

分类专栏：谷粒学院在线教育学习笔记

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/105275954

版权

谷粒学院在线教育学习笔记专栏收录该内容

36 篇文章

订阅专栏

prevent指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="submitForm">
            <input type="text">
            <button type="submit">提交</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                content: ''
            },
            methods: {
                submitForm()
                {
                    alert('submit form')
                }
            }
        })
    </script>
</body>
</html>

注意代码中的v-on:submit.prevent=“submitForm”，如果没有.prevent，那么即会执行提交动作也会弹出对话框，反之，不会自行提交动作，只是弹出alert窗口

条件指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="ok">
        <h1 v-if="ok">选中时显示</h1>
        <h1 v-else="ok">不选中时显示</h1>
        <h3 v-show="ok">选中时显示,dom树中不会删除</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                ok: false
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>