<!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>

阻止冒泡弹窗

vue 阻止冒泡弹窗小案例( 知识点：@click.stop=''")的更多相关文章

  1. vue 阻止冒泡 @click.stop=

    vue 阻止冒泡 @click.stop= vue中处理冒泡标准姿势 事件修饰符 Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示的.这些事件修饰符主要有以下几个: st ...

  2. Vue阻止冒泡

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...

  4. Vue（九）小案例 - 百度搜索列表（跨域）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  6. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  7. Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

    代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...

  8. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

  9. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

随机推荐

  1. linux单用户模式修改密码

    Linux使用版本: Centos 7 救援模式: 1,在虚拟机设置里查看光驱是否开启启动,要保证设置状态里的两个选项都已选择. 2,先将Centos系统关机,然后在VMware左侧选中这台虚拟机并右 ...

  2. lazyload is not a function解决方式

    使用jQuery图片延迟加载插件时,可能会报出$("img").lazyload is not a function的错误.(关于如何使用lazyload插件,请看另外一篇文章:j ...

  3. shell 别名alias

    在这说下 shell   命令 alias 别名   看个人爱好 设置. 直接执行命令  显示当前所有别名 alias  别名＝'新的别名'  该命令在当窗口关闭以后 会失效  想要永久生效  需要在 ...

  4. 11-vector的使用

    C++ vector用法(详解!!函数,实现) 原创 2016年09月30日 01:13:40 7862 1,简述一下vector的基本操作,它的size,capacity(),clear,rever ...

  5. Linux编译提速

    一.简介 项目越来越大,重新编译整个项目是一件很费时的事,总结可以帮助提速方法,如下: 1)tmpfs: 解决IO瓶颈,充分利用本机内存资源 2)make -j: 充分利用本机计算资源 3)distc ...

  6. 数字图像处理实验（10）：PROJECT 05-01 [Multiple Uses]，Noise Generators 标签： 图像处理MATLAB 2017-05-26 23:36

    实验要求: Objective: To know how to generate noise images with different probability density functions ( ...

  7. Mac下切换Python版本

    Mac下有多个版本的Python时,需要进行版本切换.我使用的是anaconda,在终端下进行包安装时,默认Python版本是MacOS自带的Python,需要进行手动的版本切换. # 将anacon ...

  8. jquery表单数据验证扩展方法

    /** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...

  9. 编写高质量代码改善C#程序的157个建议——建议61：避免在finally内撰写无效代码

    建议61:避免在finally内撰写无效代码 在阐述建议之前,需要先提出一个问题:是否存在一种打破try-finally执行顺序的情况,答案是:不存在(除非应用程序本身因为某些很少出现的特殊情况在tr ...

  10. 四则运算(Java) 陈志海 邓宇

    目录 Github项目地址 PSP表格 功能要求 题目 功能(已全部实现) 效能分析 设计实现过程 数值生成 算式生成 问题集生成 设计实现过程 代码说明 测试运行 代码覆盖率 项目小结 Github ...