vue中v-show和v-if在显示和隐藏元素上的区别
v-show将元素隐藏是在dom节点上加style=’display:none’
v-if是直接将元素完全去掉
拿v-show示例，(v-if 也是一样，把下面的代码中v-show替换成v-if即可运行)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
isShow:false,
},
methods:{
toggle:function(){
this.isShow = !this.isShow;
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="toggle" v-on:click="toggle()"> <br />
<div v-show="isShow" style="width: 100px;height: 100px;background: red"></div>
</div>
</body>
</html>
vue中v-show和v-if在显示和隐藏元素上的区别的更多相关文章
- Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.
Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏. Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.没有MS开发环境中的ShowI ...
- 一张图搞定OAuth2.0 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上 彻底关闭Excle进程的几个方法 （七）Net Core项目使用Controller之二
一张图搞定OAuth2.0 目录 1.引言 2.OAuth2.0是什么 3.OAuth2.0怎么写 回到顶部 1.引言 本篇文章是介绍OAuth2.0中最经典最常用的一种授权模式:授权码模式 非常 ...
- Vue中动态（import 、require）显示img图片
vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...
- jquery中使元素显示和隐藏方法之间的区别
在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...
- 简简单单，jquery中，使用checkbox控制div的显示与隐藏
今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...
- vue中使用baidushare分享到微信无法显示bug解决方案
最近vue单页面项目中有个页面分享的功能需求,按以往经验,选择了百度开源的baidushare.js 经过一天的挣扎,终于弄清楚了分享到微信后无法显示的原因. 对比分析: 以往成功使用:另写了一个专门 ...
- vue自定义公共组件components||在vue中，解决修改后的数据不能渲染到dom上的bug
//主页面框架用来嵌入:Main.vue <el-col :span="24" > * { margin: 0; padding: 0; } html { width: ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
- 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上
在.NET主程序中,我们可以通过创建 ExcelApplication 对象来打开一个Excel应用程序,如果我们想在Excle里面再打开WPF窗口,问题就不那么简单了. 我们可以简单的实例化一个WP ...
随机推荐
- FTP传输
FTP传输 一.FTP服务–用来传输文件的协议 二.设置匿名用户访问的FTP服务(最大权限) ...
- C语言:虚拟地址 和编译模式
所谓虚拟地址空间,就是程序可以使用的虚拟地址的有效范围.虚拟地址和物理地址的映射关系由操作系统决定,相应地,虚拟地址空间的大小也由操作系统决定,但还会受到编译模式的影响.这节我们先讲解CPU,再讲解编 ...
- 『与善仁』Appium基础 — 3、ADB命令介绍
目录 1.ADB命令简介 2.ADB命令运行原理 3.通过ADB命令连接安卓模拟器 (1)安装安卓模拟器 (2)ADB命令连接安卓模拟器 (3)常用Android模拟器端口号 1.ADB命令简介 AD ...
- 前端小技巧：css sprite----V客学院技术分享
前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...
- Linkerd 金丝雀部署与 A/B 测试
本指南向您展示如何使用 Linkerd 和 Flagger 来自动化金丝雀部署与 A/B 测试. 前提条件 Flagger 需要 Kubernetes 集群 v1.16 或更新版本和 Linkerd ...
- c++ 的父类 new 重载, 子类new 对象的时候会调用父类的operater new
子类在new 对象的 时候 父类的new 进行了重载,那么会调用父类的operater new() 函数 #include <iostream> #include <string& ...
- 类加载机制+JVM调优实战+代码优化
类加载机制 Java源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机把描述类的数据从 Class 文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直 ...
- Go通关04：正确使用 array、slice 和 map！
Array(数组) 数组存放的是固定长度.相同类型的数据. 数组声明 var <数组名> = [<长度>]<元素>{元素1,元素2} var arr = [2]in ...
- Nat Comm | 中科院动物所张勇团队合作揭示动物中DNA转座子介导基因重复的机制
1950年Barbara Mclintock 首次在玉米中发现转座子(TEs),并由此获得诺贝尔奖.尽管长期被认为是垃圾DNA,但现在TEs被广泛认可是宿主基因组演化的重要推动力.它们可引起包含基因重 ...
- 为什么大部分的Android开发成为不了架构师
小团队一般 10 人左右,其中常常是技术最牛的人做架构师(或TL).所以,架构师在广大码农中的占比大概平均不到 10%.而架构师也可以分为初级.中级.高级三档,江湖上真正高水平的软件架构师就更少了. ...