vue 阻止冒泡弹窗小案例( 知识点：@click.stop=''")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡弹窗</title>
    <script src="js/vue.js"></script>
    <style>

        /* 账号密码输入框在屏幕正中央 */
        #d2{
            background: rgba(0,0,0,0.6);
            width: 100%;
            margin: auto;
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom: 0;
        }
        #d3{
            background: #ffff;
            border-radius: 5px;  /* 边框圆角 */
            padding-top: 15px;
            padding-left:30px;
            padding-bottom: 15px;
            width:290px;
            height:160px;
            position: fixed;
            margin: auto;
            left: 0;    /*  当上下左右的距离窗口一样的时候，输入框就会被置于屏幕正中间 */
            right:0;
            top:0;
            bottom: 0;

        }

    </style>
</head>

<body>

    <div id="d1">
        <h1 @click="is_show=true">点击产生窗口</h1>
        <div id="d2" v-show="is_show" @click="is_show=false">
            <!--<div id="d3" v-show="is_show" @click="is_show=false">-->
            <div id="d3" @click.stop="">
                账号: <input type="text"><br><br>
                密码: <input type="password"><br><br>
                <input type="submit" value="提交">
            </div>
        </div>

    </div>

<script>
    let vm = new Vue({
        el: "#d1",
        data: {
            is_show: false,
        },
        methods: {},

    })

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

阻止冒泡弹窗