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. Spring Security方法级别授权使用介绍

    1.简介 简而言之,Spring Security支持方法级别的授权语义. 通常,我们可以通过限制哪些角色能够执行特定方法来保护我们的服务层 - 并使用专用的方法级安全测试支持对其进行测试. 在本文中 ...

  2. Nginx负载均衡与反向代理的配置实例

    user www www; worker_processes 10; error_log /data1/logs/nginx_error.log crit; pid /usr/local/webser ...

  3. discuz!X2头像无法显示解决方法

    discuz x2刚刚发布,很多站长就迫不及待地将自己的论坛升级. 可是安装完discuz X2之后,就马上发现论坛会的头像都不见了,取而代之的是一个小红叉.会员也没有办法设置自己的头像. 各位站长们 ...

  4. Java中的for循环——通过示例学习Java编程（9）

      作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=21 循环用于反复执行同一组语句,直到满足特定条件 ...

  5. asp.net 子域跨域 带cookie

    先来一个老外的解决方案: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api ...

  6. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  7. Oracle数据的导入导出

    Oracle数据导入导出imp/exp就相当于oracle数据还原与备份. exp命令可以把数据从数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到数据库服务器中. 执行环境D ...

  8. 关于dom4j在maven中的使用

    在maven中添加dom4j的依赖, (如何使用eclipse构建maven项目, 这里就不在赘述) <!-- https://mvnrepository.com/artifact/org.do ...

  9. 定时器new Timer().schedule()的使用

    Timer是一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行.实际上是个线程,定时调度所拥有的TimerTasks. TimerTask是一个抽象类,它的子类由 ...

  10. Yii2 components api/controller

    When we wrote API, those controllers need to implement the following feature: 1. return JSON format ...