v-show将元素隐藏是在dom节点上加style=’display:none’

v-if是直接将元素完全去掉

拿v-show示例，(v-if 也是一样，把下面的代码中v-show替换成v-if即可运行)

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    isShow:false,

                },

                methods:{

                    toggle:function(){

                        this.isShow = !this.isShow;

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="toggle" v-on:click="toggle()"> <br />

        <div v-show="isShow" style="width: 100px;height: 100px;background: red"></div>

    </div>

</body>

</html>

vue中v-show和v-if在显示和隐藏元素上的区别的更多相关文章

  1. Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.

    Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏. Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.没有MS开发环境中的ShowI ...

  2. 一张图搞定OAuth2.0 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上 彻底关闭Excle进程的几个方法 （七）Net Core项目使用Controller之二

    一张图搞定OAuth2.0   目录 1.引言 2.OAuth2.0是什么 3.OAuth2.0怎么写 回到顶部 1.引言 本篇文章是介绍OAuth2.0中最经典最常用的一种授权模式:授权码模式 非常 ...

  3. Vue中动态（import 、require）显示img图片

    vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...

  4. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...

  5. 简简单单，jquery中，使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

  6. vue中使用baidushare分享到微信无法显示bug解决方案

    最近vue单页面项目中有个页面分享的功能需求,按以往经验,选择了百度开源的baidushare.js 经过一天的挣扎,终于弄清楚了分享到微信后无法显示的原因. 对比分析: 以往成功使用:另写了一个专门 ...

  7. vue自定义公共组件components||在vue中，解决修改后的数据不能渲染到dom上的bug

    //主页面框架用来嵌入:Main.vue <el-col :span="24" > * { margin: 0; padding: 0; } html { width: ...

  8. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

  9. 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上

    在.NET主程序中,我们可以通过创建 ExcelApplication 对象来打开一个Excel应用程序,如果我们想在Excle里面再打开WPF窗口,问题就不那么简单了. 我们可以简单的实例化一个WP ...

随机推荐

  1. DHCP与配置命令

    1. DHCP简介 2. DHCP主要用途 3. 使用DHCP的好处 4.DHCP经典应用模式 5.DHCP交互过程 DHCP的IP地址自动获取工作原理 6.DHCP中继    应用场景   工作原理 ...

  2. python根据窗口标题找句柄，将窗口前置活动

    import time, threading, copy import win32api, win32con import win32gui import win32gui def zhaojb(aa ...

  3. python 函数定义自变量的写法及调用

    import pandas as pd #函数定义时指明自变量,指明自变量的类型,指定自变量的默认值 #函数定义时,可以通过"自变量名称=常量"的方式指定自变量的默认值,调用时可以 ...

  4. 团队开发day03

    完成安卓的登录和注册界面的设计,进行服务器端的开发,设计javabean实体 映射,零售商 ,商品,品牌商,订单类的构建 遇到问题:安卓发起网络请求,客户端回应请求,数据处理设置. 使用传统的方法 / ...

  5. Requests方法 -- 关联用例执行

    1.参照此篇流程 :Requsts方法 -- Blog流程类进行关联 2.用例接口目录如下: 3.用例代码如下: import requestsimport unittestfrom Request. ...

  6. SpringBoot之yaml语法及静态资源访问

    配置文件-yaml 在spring Boot开发中推荐使用yaml来作为配置文件. 基本语法: key: value:kv之间有空格 大小写敏感 使用缩进表示层级关系 缩进不允许使用tab,只允许空格 ...

  7. Python基础之tabview

    以前写过界面,但是没有记录下来,以至于现在得从头学习一次,论做好笔记的重要性. 现在学习的是怎么写一个tabview出来,也就是用tkinter做一个界面切换的效果.参考链接:https://blog ...

  8. OpenSUSE Leap 42.1 KDE Ultmate Linux Distribution终极Linux系统试用与SSH连接

    系统安装环境: #一台旧笔记本电脑 #CPU Intel(R) Core(TM) i3 M 380 2.53GHz (4核) #内存 1G #硬盘存储 250G #系统型号 OpenSUSE Leap ...

  9. linux 之awk 次数统计

    sort +awk+uniq 统计文件中出现次数 jps -v |grep jar|grep -v Jps|awk  'BEGIN{FS=".jar "} {print $1}'  ...

  10. 性能测试之查看cpu命令

    top -m 用户空间进程(us). 内核空间进程(sy). 高nice值的用户空间进程(ni). 空闲(id). 空闲等待io(wa). 中断上半部(hi). 中断下半部(si). 以及steal时 ...