v-if条件判断及v-show

最新推荐文章于 2024-05-31 11:03:20 发布
最新推荐文章于 2024-05-31 11:03:20 发布
阅读量8.1k 收藏 33
点赞数 13
分类专栏： Vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53841687/article/details/126124236
版权

一、v-if 的基本使用

v-if用于条件判断，判断Dom元素是否显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-if="isFlag">我们是勇于战斗的</h2>
			
			<h3 v-if="age<18">我们是青少年</h3>
			<h3 v-else-if="age<60">我们是18到60的青壮年</h3>
			<h3 v-else>大于60岁我们是老年人</h3>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						isFlag:false,
						age:70
					}
				}
			})
			
		</script>
	</body>
</html>

输入各不同年龄段效果：

 当isFlag 为false时—隐藏DOM元素

 

 二、v-if 的demo

  在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

最低0.47元/天 解锁文章
呦呦鹿鸣~@
关注
  • 13
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Vue 的v-if与v-show
sunhy007的博客
07-04 1万+
在Vue的内部指令中，v-show与v-if的区别，总结如下： 在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。 v-if 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了
Vue内置指令——v-show和v-if指令
zg0601的博客
03-21 4万+
Vue中指令都是带有v-的特殊属性，这些指令主要是用来控制DOM元素的行为，例如最简单的显示、隐藏。本文详细讲解Vue中非常常用的两个条件指令—— v-show 和 v-if 以及它们的区别。
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 7544
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
【vuejs】v-if和v-show的原理、异同、使用场景的分析
最新发布
工作的日常记录和平凡的生活分享
05-31 956
在Vue中，提供的v-if和v-show都是用来控制元素是否在页面上显示的条件指令。当条件为true时，它们都会使元素可见；当条件为false时，它们都会隐藏元素。这一点在Vue的官方文档中也有明确的说明，它们提供了一种简单的条件渲染机制。
vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
12-18 1万+
vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
Vue之条件渲染
浩泽学编程的博客
07-10 1457
v-ifv-elsev-else-ifv-show写法：（表达式返回的是布尔值）（1）v-if=“表达式”（2）v-else=“表达式”（一般不带表达式，v-else是当v-if或v-else-if都不成立就会触发）（3）v-else-if=“表达式”适用于切换频率低的场景特点：不展示的DOM元素直接移除注意：v-if可以和v-else、v-else-if一起使用，但要求结构不能被“打断”写法：v-show=“表达式”（表达式返回的是布尔值）
v-on事件处理以及v-if条件判断
m0_59707151的博客
05-24 438
一、v-on事件处理 1.1 v-on事件处理及传参 <div id="app"> <h2>{{count}}</h2> <button type="button" @click="add">+</button> <button type="button" @click="sub">-</button> <br> <br> <!-- 传参 --> <button
vue中的v-if和v-show的区别详解
10-16
Vue.js 是一个流行的前端框架，它提供了一套强大的指令系统，其中包括 `v-if` 和 `v-show`，这两个指令在视图层的条件渲染中扮演着重要角色。它们的主要目标都是根据条件决定元素是否应该被展示，但在实现方式上存在...
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
10-17
例如，当使用`v-if`或`v-show`进行条件渲染，或者使用插值表达式显示动态数据时，如果不做处理，这些内容在JS执行前会短暂地显示在页面上。 为了解决这个问题，我们可以采取以下策略： 1. 隐藏待编译的元素：在...
实例讲解v-if和v-show的区别
12-29
代码： <!DOCTYPE html> <... <head>... <div v-if=isIf>v-if <div v-show=ifShow>v-show <button @click=toggleShow()>点击按钮</button> </body> [removed]</scrip
vue使用v-if v-show页面闪烁,div闪现的解决方法
12-12
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。 可以在根元素添加v-cloak来解决，并且设置它的样式即可。 代码只是示例，还需要自己修改测试。 <!DOCTYPE html> <...
如何区分vue中的v-show 与 v-if
10-14
在Vue中，`v-if` 和 `v-show` 都是用于条件渲染的指令，但它们之间存在一些关键的区别。 1. 渲染机制： - `v-if`：`v-if` 指令会根据初始条件决定是否真的渲染元素。如果条件为真，Vue将生成并插入相应的DOM元素；...
VUE之v-if语句多个条件判断时的写法
初心不改
02-17 3万+
v-if满足某个条件condition = 0时，我们常见写法为： v-if="condition === 0" 假如我想同时满足多个条件时，要怎么写呢？ ① 普通写法： v-if="condition === 0 || condition === 1 || condition === 2" ② 简洁写法： v-if="[0, 1, 2].includes(condition)" <!--括号里可以是字符串和数字--> ③ 复杂用法： 标签中： v-if="matchState(activ
vue之v-show和v-if详解
春风化雨
12-11 5463
一、v-show与v-if的共同点 我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示 在用法上也是相同的 <Model v-show="isShow" /> <Model v-if="isShow" /> 当表达式为true的时候，都会占据页面的位置 当表达式都为false时，都不会占据页面位置 二、v-show与v-if的区别 控制手段不同 编译过程不同 编译条件不同 控制手段：v-sh...
v-if条件判断
KEY_cheung的博客
09-02 6662
1. v-if、v-else-if和v-else 1.1 和if、else、else if效果一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "app"> <!--在标签里使用条件判断--> &...
HTML简单实现v-if与v-for与v-model
Yyds12300的博客
10-28 1881
首先VIewModel将View和Model连接一起，Model的数据改变View的数据也变使用Visual Studio Code启动Vue需要vue.js插件和导入CDN(包)vue.js插件：CTRL + shift + x 在搜索栏搜索vue.js安装即可CDN：VS创建一个.html的文件< div>< /div>块为view层（模板）< script>< /script>块为Model层（数据）ViewModel的体现：在浏览器的控制面板（Console),输入。
vue html if,vue中v-if使用方法详解
weixin_30189559的博客
06-15 3504
vue提供了一个用于判断的v-if 、v-else语法，可以通过v-if和v-else进行内容的显示与隐藏。下面将通过使用v-if、v-else进行数据的显示与隐藏1、新建一个html页面，然后创建一个div设置id为app，然后在这个div里面创建两个div，同时给这两个div设置不同的文本。代码：当flage为true时显示当flage为false时显示2、引入vue.js。在body结束标签...
v-if的使用
热门推荐
m0_59359854的博客
08-02 4万+
v-if用于条件判断，判断Dom元素是否显示。单独使用v-if，变量为布尔值，为true才渲染Domv-show的变量也是布尔值，为true才显示内容，类似css的displayv-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。...
vue v-if in判断
08-29
Vue的v-if指令用于在模板中进行条件判断。它根据给定的表达式的值来决定是否渲染特定的元素或组件。在使用v-if时，可以通过指定一个布尔表达式来进行条件判断。 例如，假设我们有一个数据变量isShow，它的值为true或false。我们可以使用v-if来根据isShow的值来决定是否渲染一个元素： ```html <div v-if="isShow"> 这是要显示的内容 </div> ``` 在上面的例子中，如果isShow为true，则会渲染`<div>`元素及其内部的内容；如果isShow为false，则不会渲染该元素。 此外，v-if还支持在标签上使用条件判断，如下所示： ```html <template v-if="isShow"> <p>这是要显示的段落</p> </template> ``` 在这个例子中，如果isShow为true，则会渲染`<p>`标签及其内部的内容；如果isShow为false，则不会渲染该标签。 需要注意的是，使用v-if时，如果条件为false，对应的元素将从DOM中移除；如果条件为true，对应的元素将被插入到DOM中。这意味着v-if具有较高的切换开销。如果需要频繁切换显示与隐藏，可以考虑使用v-show指令。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值