Vue基础之v-if与v-show
Show Time!
说再多不如直接上效果:
(一)v-if
<div id="app">
<div v-if="flag" class="box one">吃晚饭</div>
<div v-else class="box two">不吃晚饭</div>
<button @click="flag=!flag">切换条件</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
flag: true
}
},
}).mount("#app")
</script>
由上图可以得出,v-if是在DOM层面控制元素的显示隐藏,当条件不成立时,元素就不存在,当条件成立时元素才会出现。
v-if是真正的条件渲染,因为会确保切换过程中条件块内的事件监听器和子组件适当的被销毁和重建,在DOM层面销毁和创建
(二)v-show
v-show是通过css控制显示与隐藏,当条件不成立时,元素上面会加入一个style="display:none;"来隐藏元素;不管初始条件是什么,元素总会被渲染,并且只是简单地基于CSS进行切换,在CSS层面控制。
<div id="app">
<div class="box one" v-show="flag">大大怪将军</div>
<div class="box two" v-show="!flag">小小怪下士</div>
</div> <script src="js/vue.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
flag: true
}
},
}).mount("#app")
</script>
通俗来讲,无论初始条件是什么,元素总是会存在于解析出来的HTML代码当中,而v-if只有在条件成立的时候,元素才会在于解析出来的HTML代码中出现。
使用场景
1.如果想要缓存组件上的一些内容,如缓存输入框内容,可以选择使用v-show;
2.如果会频繁切换组件,使用v-show更好,减少Dom的渲染。
Vue基础之v-if与v-show的更多相关文章
- vue的使用与安装 npm -v报错
1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- (day65、66)Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- VUE基础实用技巧
Vue以前听说过,有了解过一点.当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的 ...
- 一、vue基础语法(轻松入门vue)
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- vue - vue基础/vue核心内容
终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- [转]oracle系统表v$session、v$sql字段说明
在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...
随机推荐
- C语言函数值传递问题
C语言函数间值传递问题 错误示例 #include <stdio.h> int * pop() { int a[3]; // 定义的局部变量a[3]在调用完之后自动释放其空间 int i ...
- Spring MVC学习(一) Spring MVC基本介绍以及配置
Spring MVC学习(一) Spring MVC基本介绍以及配置 摘要:这篇笔记是对于Spring MVC的第一部分的学习中的整理,主要记录了Spring MVC的基础知识以及配置一个简单的S ...
- P3845 [TJOI2007]球赛
简要题意 \(T\) 组数据,每一组数据给出 \(n\) 个数对 \((a,b)\).你需要将其分为几组,使得组单调不降.求最小组数. 思路 模拟赛考的题. 先来介绍 Dilworth 定理: 对于任 ...
- 从0到1手把手教你实现vite系列--重写依赖请求路径,处理/@modules/vue引用
前面以及写了三篇了,这是第四篇,等我写完就合并起来哦 这个是第一篇的链接:vite原理,创建项目,基础知识 这个是第二篇的链接Vite-中篇-通过服务访问静态资源以及重写请求路径 这个是第三篇的链接# ...
- 认知篇:CQRS架构模式的本质
作者:京东科技 倪新明 CQRS只是一种非常简单的模式(pattern),CQRS本身并不是一种架构风格,和最终一致性/消息/读写分离/事件溯源/DDD等没有必然的联系,它最大优势是给我们带来更多的架 ...
- Collection集合常用功能-Iterator接口介绍
Collection集合常用功能 Collection是所有单列集合的父接口,因此在Collection中定义了单列集合(List和Set)通用的一些方法,这些方法可用于操作所有的单列集合.方法如下︰ ...
- qt获取子控件坐标
QPoint pos = ui->m_blt->mapToGlobal(QPoint(0, 0)); 就可以了.
- IDEA 2022 开启热部署
POM.XML <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 多功能游戏工具箱 - Watt Toolkit V4.4
Watt Toolkit Watt Toolkit 工具箱能够让 Steam 平台的玩家们享受更加出色的游戏体验,工具箱包含多种实用的功能,支持快速切换登录账号,玩家还可以通过这款工具编辑 Steam ...
- 精美的web前端源码的特效
1.JS自定义烟花特效 这是一款基于JS和Canvas的自定义烟花特效,初始化界面的时候特效是不带声效的绽放,当你点击顶部中间的播放,即可以看到美丽的烟火也可以听到烟花绽放的声音,让你脑海浮现过年团圆 ...