VUE 学习（二）-条件语句v-if,v-else,v-else-if,v-show

最新推荐文章于 2024-05-07 10:45:47 发布
最新推荐文章于 2024-05-07 10:45:47 发布
阅读量189 收藏
点赞数
分类专栏： HTML+CSS+SVG+VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43434300/article/details/108214293
版权

1.v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE条件语句-(v-if)</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="div1">
		    <p v-if="seen">现在你看到我了</p>
		    <template v-if="ok">
		      <p>喜羊羊</p>
		      <p>懒羊羊</p>
		      <p>蕉太狼</p>
		      <p>香太郎</p>
		    </template>
		</div>
		<script>
			new Vue({
			  el: '#div1',
			  data: {
			    seen: true,
			    ok: true
			  }
			})
		</script>
		<!--这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。-->
	</body>
</html>

2.v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE条件语句-(v-else)</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="div1">
			<div v-if="Math.random() > 0.5">
			  Sorry
			</div>
			<div v-else>
			  Not sorry
			</div>
		</div>
		<div id="div2">
			<div v-if="meach">
				你好小樱
			</div>
			<div v-else>
				你好小雨
			</div>
		</div>
		<script>
			new Vue({
		  		el: '#div1'
			})
			new Vue({
				el: '#div2',
				data:{
					meach:false
				}
			})
		</script>
	</body>
</html>

3. v-else-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE条件语句-(v-else-if)</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="div1">
		    <div v-if="type=='A'">
		      A
		    </div>
		    <div v-else-if="type=='B'">
		      B
		    </div>
		    <div v-else-if="type=='C'">
		      C
		    </div>
		    <div v-else>
		      Not A/B/C
		    </div>
		</div>
		<script>
			new Vue({
			  el: '#div1',
			  data:{
			  	type:'B'
			  }
			})
		</script>
	</body>
</html>

4. v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE条件语句-(v-show)</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="div1">
			老许，要老婆不要？
		    <div v-show="ok">要</div>
		</div>
		<script>
		new Vue({
		  el: '#div1',
		  data: {
		    ok: true
		  }
		})
		</script>
	</body>
</html>

 

豆皮没有豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 的 条件语句 v-if v-else v-else if v-show
qq_27009517的博客
06-26 169
控制内容包括标签以及后代的内容 不是使用 display: none; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
首先，我们来看条件判断，这包括`v-if`、`v-else-if`、`v-else`和`v-show`。 1. `v-if`指令用于在满足特定条件时才渲染元素。例如，在示例中，当`seen`为`true`时，`<p>`标签将显示文本“现在你看到我了”。`v-if`...
VUE2——v-if v-else v-show 指令
肉丸不肉
08-30 1109
v-if v-else v-show 指令 1、index.html中新增加链接 &lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue.js实例&lt;/title&
vue2 v-if 使用
最新发布
K___End的博客
05-07 311
在 Vue 2 中，v-if是一个条件渲染指令，用于根据表达式的值决定是否渲染模板的一部分。下面是使用v-if。
vue2.0 v-if和v-else指令
yyjourney的博客
01-03 2053
在项目中总会遇到一个按钮进行页面切换的操作，这时候 使用v-if和v-else就比较方便。demo: <template v-if="loginType"> <div>这里是模块一内容</div> </template> <template v-else> <div>这里是模块二内容</div>
跟着技术胖学Vue2.0—第二课：v-if v-else v-show指令
哎呦喂iuv的博客
12-28 550
学习回顾 课程主要内容 1、熟悉v-if、v-else、v-show的用法 2、掌握v-if与v-show的区别 操作步骤 1、熟悉v-if、v-else、v-show的用法 第一步，打开vs code，还是用昨天的那个项目来写。首先是index.html里，需要加上一行li，用来显示我们的第二个实例。 这里get到一个新知识点——按住Alt+Shift+⬇，可以直接复制当前行并显示在下一行（仅限vs code）。 <body> <h1>Vue2.0实例&l
初学Vue（全家桶）-第5天（vue2）：条件渲染（v-if、v-else-if、v-else、v-show）
lalala_dxf的博客
05-21 449
初学Vue v-show命令做条件渲染 当v-show的值为true时，就会显示元素文本区域中的内容，为false时就不会显示。如下： 示例1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
Vue.js常用指令汇总（v-if、v-for等）
10-21
3. **v-else** - 与`v-if`或`v-show`配合使用，当条件不满足时显示对应的元素。 ```html <div v-if="condition"> <!-- 如果condition为真，这里显示 --> <div v-else> <!-- 如果condition为假，这里显示 --> ```...
vue-basic-routing-blog-excercise:Vue研讨会免费回购
04-17
这包括条件语句（`v-if`和`v-else`）、循环（`v-for`）以及事件处理（`v-on`）等。 5. **状态管理**：虽然小型项目可以直接在组件内管理状态，但对于复杂应用，可能需要使用Vuex来集中管理应用的状态，实现组件间的...
程序员求职-Vue面试题汇总.zip
07-04
- 模板语法：包括`{{ }}`插值表达式、`v-bind`属性绑定、`v-on`事件处理、条件语句（`v-if`、`v-else`、`v-show`）和循环（`v-for`）等。 - 组件：Vue的核心特性，可以创建可复用的UI部件，通过`<template>`、`...
vue-dev总结.rar
06-22
2. 模板语法：Vue提供了一套简洁的模板语法，如`{{ }}`插值表达式、`v-if/v-else`条件语句、`v-for`循环等，让HTML更加易读易写。 3. 组件化：Vue的核心概念之一就是组件，通过组件可以构建复杂的用户界面，每个组件...
Vue - v-if和v-else-if和v-else的使用
2202_75871191的博客
03-11 2481
v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model。2.不同点：v-if存在或不存在，v-show展示或不展示。v-if和v-for在vue2或vue3中都不要同时使用，v-else,v-cloak,v-once，v-pre不需要带值。当v-if后面表达式的值为false的时候显示v-else所在的元素。当v-if后面表达式的值为true的时候显示v-if所在的元素。在vue3中v-if比v-for优先级高。v-if和v-for优先级和使用事项。
Vue2中的v-if和v-show
m0_72694993的博客
09-05 898
，如果用户不频繁操作的话，应用v-if更好一些，性能更快更好。1.v-if指令通过后边绑定的条件进行判断是否进行显示，我们可以通过下边的例子进行一个简单的v-if实例，可以看出的是，flagv-if的判断语句分别（flag==0）（flag==1），所以我们可以通过绑定条件判断语句进行判断是否渲染。2. 我们想实现上述代码的功能，同样可以用v-if... v-else的方式进行实现，与if...else的用法相似，当不满足v-if的条件的时候，就会显示v-else所在标签的内容。二、v-show相关。
Vue2：v-if、v-for、v-else 的渲染问题
weixin_43932309的博客
10-02 1704
现象：当 v-if和v-for同时使用，且其后紧跟v-else时。v-if条件不满足，v-else循环展示多次（length次）。实际效果等同于：v-for嵌套v-if和v-else。建议：不推荐同时使用 v-if 和 v-for。
Vue指令之v-else篇
孤岛的鲸
09-16 6423
讲完v-if篇，那么接下里我们就说说v-else喽 对比java中的if(条件) {条件成立执行的语句} else {条件不成立执行的语句} 我相信你的脑瓜子已经转了90度，已经完全搞明白Vue的v-else该怎么用了 没错：就是v-if="条件" 条件成立 v-else 条件不成立，有没有发现 v-else离不开v-if，如果没有v-if的存在 v-else将变得毫无意义。 不啰嗦了： ...
2021-02-07 输入任意年份判断这一年的2月份天数
YuKing_HONG的博客
02-07 1215
输入任意年份判断这一年的2月份天数 <title>Document</title> <script> function isRunYear(year) { var falg = false; if (year % 4 == 0 && year % 100 == 0 && year || 400 == 0) { falg =.
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
if语句
weixin_30347335的博客
08-28 51
#include<iostream> using namespace std; int main() { cout <<"Enter two numbers:"<<endl; int v1,v2; cin>> v1 >> v2; int lower,upper; if(v1 <= v2) ...
v-if v-else-if
09-10
v-if、v-else-if以及v-else是Vue.js中的条件指令，类似于JavaScript的条件语句if、else if和else。这些指令可以根据表达式的值在DOM中渲染或销毁元素或组件。 在使用v-if、v-else-if和v-else时，可以通过设置不同的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆皮没有豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值