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. (转)在CentOS中修改中文字符集

    虽然在实际工作环境下,Linux中不建议使用中文,但是如果一定要进行中文显示,尤其对于刚接触linux且英语基础不太好的人来说,那么本文具有一定的参考价值. 本文介绍在linux的shell环境下优化 ...

  2. pat1062. Talent and Virtue (25)

    1062. Talent and Virtue (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Li Abou ...

  3. babel7中 preset-env 完全使用

    babel7中 preset-env 完全使用 const presets = [ ['@babel/env', { // chrome, opera, edge, firefox, safari, ...

  4. cairo-dock天气位置代码

    cairo-dock天气位置代码: 城市: 北京CHXX0008哈尔滨CHXX0046长春CHXX0010沈阳CHXX0119大连CHXX0019天津CHXX0133呼和浩特CHXX0249乌鲁木齐C ...

  5. jQuery学习笔记（三）

    jQuery中的事件 页面加载 原生DOM中的事件具有页面加载的内容onload事件,在jQuery中同样提供了对应的内容ready()函数. ready与onload之间的区别: onload re ...

  6. 学习笔记：MDN的Web入门

    HTML: 要引用一个父目录的文件,加上两个点. HTML并不是真正的编程语言,它是一种用于定义内容结构的标记语言. 元素(Element):开标签.闭标签与内容相结合,便是一个完整的元素.元素可以用 ...

  7. pscp no such file or directory

    背景:在WINDOWS10 上传一个文件 到 Centos 7中 工具:pscp 用法: pscp.exe -C e:\tinyfox\site\wwwroot\cdms\projecttemplat ...

  8. localstorage本地存储的应用

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

  9. js数字滑动时钟

    js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. CPU保护模式DPL、CPL简易理解

    现代INTEL CPU都有保护模式,实模式这两种CPU运行模式.当CPU加电,CPU初始化时就运行在是模式下,然后现代操作系统会从实模式跳转到保护模式! 为什么需要保护模式? 在最开始编程的汇编时代, ...