v-show的使用与v-if的差异对比

相同点:

都可以达到隐藏和显示的效果.

不同点:

  1. v-show 会用display:none 来隐藏元素节点,推荐使用这种方式
  2. v-if 会移除节点,可以配合v-else-if和v-else 使用
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="vue">

        <h2 v-if="status">显示一</h2>

        <h3 v-else>显示二</h3>

        <span v-show="status">显示三</span>

        <br>

        <input v-model="status" type="checkbox">

    </div>

</body>

<script type="text/javascript">

    var app = new Vue({

        el: "#vue",

        data:{

            status:true,

        }

    });

</script>

</html>

效果:

16.VUE学习之-v-show的使用与v-if的差异对比的更多相关文章

  1. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  2. vue学习第一部

    目录 基础操作 vue基础使用 步骤 vue的框架思想(mvvm) 显示数据 vue 常用指令 属性操作 事件绑定 操作样式 条件渲染指令 列表渲染指令 vue对象提供的属性功能 过滤器 计算和侦听属 ...

  3. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  4. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  5. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  6. 【Vue学习笔记1】基于Vue2.2.6版本

    记录一下自己关于Vue学习的过程,便于以后归纳整理以及复习. 1.下载引用vue.js 下载: npm install vue ,然后引用. 或直接线上引用: <script src=" ...

  7. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  8. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  9. Vue 学习顺序

    起步: 1.扎实的 JavaScript / HTML / CSS 基本功,ES6 最好过一遍 2.通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script&g ...

随机推荐

  1. Unity MonoBehaviour.Invoke 调用

    使用 Invoke() 方法需要注意 3点: 1 :它应该在 脚本的生命周期里的(Start.Update.OnGUI.FixedUpdate.LateUpdate)中被调用: 2:Invoke(); ...

  2. 牛客网Java刷题知识点之构造函数可以调用一般函数，但是一般函数不可以直接调用构造函数

    不多说,直接上干货! 通过 牛客网Java刷题知识点之构造函数是什么.一般函数和构造函数什么区别呢.构造函数的重载.构造函数的内存图解 我们对构造函数有了一个比较清楚的认识,当我们在创建对象时,我们会 ...

  3. matlab 文件打开设置

    平台 macOS MATLAB 版本 matlab 2017a 需要设置文件打开编码的情况 从windows平台迁移过来的.m文件的编码格式是GB2312的, 而macOS的MATLAB默认是UTF- ...

  4. int，long，long long的数据范围

    unsigned   int   0-4294967295   int   2147483648-2147483647 unsigned long 0-4294967295long   2147483 ...

  5. Docker for mac 安装 kong

    首先安装一个 PostgreSQL,选的版本是 9.5 $ docker run -d --name kong-database \ -p : \ -e "POSTGRES_USER=kon ...

  6. java递归展示树形图代码实现以及遇到的问题

    我最近写到了一个项目中用到了树形图,不得不说这个树形图是真的扯淡: 我用到的是layui中的树形图,再展示数据过程中遇到了很多的问题,废话不多说,直接贴代码. 一.调用排序接口,对数据进行排序. 二. ...

  7. String与Date转换

    public class TimeTraining { public static void changeStr(String str){ str = "137878"; } pu ...

  8. [转]C#中StreamReader读取中文出现乱码

    摘自:C#中StreamReader读取中文出现乱码 原因是自Windows 2000之后的操作系统在文件处理时默认编码采用Unicode所以.NET文件的默认编码也是Unicode.除非另外指定,S ...

  9. System Center Configuration Manager 2016 域准备篇（Part4）

    步骤4.创建系统管理容器 注意:在Active Directory域控制器服务器(AD01)上以本地管理员身份执行以下操作 有关您为何这样做的详细信息,请参阅https://docs.microsof ...

  10. 使用adbWireless无线调试Android真机设备[转]

    开发Android的朋友都知道,真机调试需要把手机与PC相连,然后把应用部署到真机上进行安装和调试.长长的USB线显得很麻烦,而且如果需要USB接口与其他设备连接的话显得很不方便.今天介绍一种不通过U ...