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. (转)Linux 开机引导和启动过程详解

    Linux 开机引导和启动过程详解 编译自:https://opensource.com/article/17/2/linux-boot-and-startup作者: David Both 原创:LC ...

  2. 二进制读取 jdbc

    package com.itheima.clob.test; import java.io.FileInputStream; import java.io.FileOutputStream; impo ...

  3. list map set常用方法之list

    list 常用方法: 默认添加:list.add(e); 指定下标添加(添加后下标后的元素向后挪一位):list.add(index,e); 获得集合内元素个数:list.size(); 返回是否删除 ...

  4. JS文本框输入限制

    1上面的文本框只能输入数字代码(小数点也不能输入): CODE: <input onkeyup="this.value=this.value.replace(/\D/g,'')&quo ...

  5. jQuery中$(function(){})与（function($){})(jQuery)、$(document).ready(function(){})等的区别讲解

    1.(function($){...})(jQuery); (1).原理:       这实际上是匿名函数,如下: function(arg){...} 这就定义了一个匿名函数,参数为arg:而调用函 ...

  6. Android ImageView的几种对图片的缩放处理 解决imageview放大图片后失真问题解决办法

    我的解决办法: 1 首先设置android:layout_width=”wrap_content”和android:layout_height=”wrap_content”,否则你按比例缩放后的图片放 ...

  7. Android stutdio2.2 启动模拟器出现“/dev/kvm is not found.”解决方法

    第一次启动avd,Android stutdio会自动安装Intel HAXM,而且表面看是成功的,再次启动会出现“/dev/kvm is not found.”,这说明Intel HAXM没有安装成 ...

  8. Eucalyptus管理页面密码设置

    桉树环境什么的都已经是配置好了的,但是过了一段时间不用,也不知道密码是什么了,看着下面的页面也不知道如何进去,这里我们通过命令行的方式重置用户名和密码信息. 登陆clc所在机器,输入下命令: euar ...

  9. eclipse, idea安装lombok插件

    参考博客: https://www.cnblogs.com/quan-coder/p/8387040.html 一:在开发工具中安装插件: Eclipse: 下载地址:https://projectl ...

  10. JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

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