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

相同点:

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

不同点:

  1. v-show 会用display:none 来隐藏元素节点,推荐使用这种方式
  2. v-if 会移除节点,可以配合v-else-ifv-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. POJ 1556 E - The Doors

    题意:给定n堵墙,现在要你从(0,5)走去(10,5)的最短距离 思路:刚开始还想模拟,就是从(0,5)走,每次x向右一格,然后判断有没和线段相交就可以.但是它的们有可能是小数形式给出的,这样就GG了 ...

  2. MySQL中有关TIMESTAMP和DATETIME的对比

    TIMESTAMP和DATETIME的相同点: 1> 两者都可用来表示YYYY-MM-DD HH:MM:SS[.fraction]类型的日期. TIMESTAMP和DATETIME的不同点: 1 ...

  3. 如何处理HTML标签属性

    在jQuery里我们可以通过.attr()的方法来实现对HTML标签属性(tag attribute)处理. 1. 获取标签属性的值 (演示) 语法:$('选定目标').attr('属性名') 例子如 ...

  4. substring、slice、substr的区别

    首先定义一个变量便于下面测试:var str = "xx351223441";   substring: str.substring(form,to):从字符串里截取下标为form ...

  5. Today is the first day of the rest of your life.

    Today is the first day of the rest of your life. 今天是你余下人生的第一天.

  6. ASP.NET MVC中使用窗体验证出现上下文的模型在数据库创建后发生更改,导致调试失败(一)

    在ASP.NET MVC中使用窗体验证.(首先要明白,验证逻辑是应该加在Model.View和Controller哪一个里面?由于Model的责任就是负责信息访问与商业逻辑验证的,所以我们把验证逻辑加 ...

  7. Angular CLI的简单使用(2)

    刚才创建了myApp这个项目,看一下这个项目的文件结构.    项目文件概览 Angular CLI项目是做快速试验和开发企业解决方案的基础. 你首先要看的文件是README.md. 它提供了一些如何 ...

  8. php生成纯数字、字母数字、图片、纯汉字的随机数验证码

    现在讲开始通过PHP生成各种验证码旅途,新手要开车了,请刷卡! 首先,我们开始先生成一个放验证码的背景图片 注:没有Imagejpg()这个函数,只有imagepng()函数 imagecreatet ...

  9. <已解决>使用selector设置Button按下松开的样式以及 <item> tag requires a 'drawable' attribute or child tag defining a drawable 报错

    <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="ht ...

  10. Windows Profile的一些问题

    电脑症状:桌面复制的文件重启后消失:新安装的软件重启后也自动消失.排查:使用autoruns观察,发现安装了麦咖啡和360两套“安全”软件,除此外并无异常,任务管理器內也无异常发现.过程:1.保险起见 ...