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. C++ 标准模板库（STL）——容器（Containers）的用法及理解

    C++ 标准模板库(STL)中定义了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量(vector).队列(queue).栈(stack).set.map等.这次主要 ...

  2. 视频场景切换检测的FPGA实现

    本文将继续讲述图像处理算法的FPGA实现,后续可能更新图像旋转(1080P).画中画.快速DCT等算法.视频场景切换检测常用于视频编解码领域,我选用的算法是双阈值灰度直方图检测法,起初在MATLAB上 ...

  3. P4334 [COI2007] Policija

    P4334 [COI2007] Policija 题意 一个无重边的无向图,每次询问删掉一条边或删掉一个点后两个点是否联通. 思路 连通性问题,我们可以考虑使用广义圆方树解决. 对于删掉一个点的情况: ...

  4. SSH远程端口转发实战详解

    问题 前段时间在外地没有在实验室,随身携带了一个笔记本电脑.但是笔记本性能不够,想用SSH远程连接实验室的电脑.问如何连接?现有以下设备 设备 IP 备注 系统 实验室电脑C1 192.168.0.2 ...

  5. C++调试总结

    一.参考: 本文主要参考<C++编程调试秘笈>一书. 在编写C++代码时,我们不应该自己捕捉缺陷,而是由编译器和可执行代码为我们做这些事情,该书便提供了这样的一个思考.作者以"调 ...

  6. Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 （有数据保护）2021年7月29日 - Copy

    Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 (有数据保护)2021年7月29日 - Copy https://www.autoahk.com/archives/367 ...

  7. MyBatis使用Zookeeper保存数据库的配置,可动态刷新

    核心关键点: 封装一个DataSource, 重写 getConnection 就可以实现 我们一步一步来看. 环境: Spring Cloud + MyBatis MyBatis常规方式下配置数据源 ...

  8. 02.反射Reflection

    1. 基本了解 1.1 反射概述 文字说明 审查元数据并收集关于它的类型信息的能力称为反射,其中元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个 ...

  9. Spring Boot 与 R2DBC 整合

    R2DBC 是 "Reactive Relational Database Connectivity"的简称.R2DBC 是一个 API 规范的倡议,声明对于访问关系型数据库驱动实 ...

  10. jdbc如何注册数据库驱动Driver的？

    1. 先看看原生jdbc执行sql的步骤 // 在程序启动的时候需要注册一次mysql驱动,必须引入 mysql-connnector-java 的包 Class.forName("com. ...