我是靠谱客的博主 疯狂小甜瓜,这篇文章主要介绍Vue.js基础-03-条件语句(v-if/v-show)1. v-if2. v-show,现在分享给大家,希望可以做个参考。

文章目录

  • 1. v-if
    • 1.1 v-if
      • 语法示例
      • 完整示例
    • 1.2 v-else
      • 语法示例
      • 完整示例
    • 1.3 v-else-if
      • 语法示例
      • 完整示例
      • 多个v-else-if 的判断逻辑
  • 2. v-show
    • 2.1 使用
      • 语法示例
      • 完整示例
    • 2.2 和v-if 比较

1. v-if

1.1 v-if

语法示例

复制代码
1
2
<p v-if="show"></p>

完整示例

如下:

  • 如果show是false,则不会显示。
  • 如果ok是flase template中 三奇六仪的信息都不会显示
  • 但是showtemplate我们都设置了true,所以有后边的输出。
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遁甲天书</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p v-if="show"></p> <template v-if="ok"> <h1>三奇六仪</h1> <p>三奇:乙丙丁</p> <p>六仪:戊己庚辛壬癸</p> </template> </div> <script> new Vue({ el: '#app', data: { show: true, ok: true } }) </script> </body> </html>
  • 结果显示
    在这里插入图片描述

1.2 v-else

语法示例

复制代码
1
2
3
4
5
<div id="app"> <div v-if="Math.random()*100 >= 60">及格了</div> <div v-else>不及格</div> </div>

完整示例

获取一个随机数字(0~100),如果 大于等于60 输出 “及格”,否则输出“不及格”。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CROW SONG</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-if="Math.random()*100 >= 60">及格了</div> <div v-else>不及格</div> </div> <script> new Vue({ el: "#app", }); </script> </body> </html>

1.3 v-else-if

语法示例

复制代码
1
2
3
4
5
6
7
<div id="app"> <div v-if="scores >= 90"></div> <div v-else-if="scores >= 80"></div> <div v-else-if="scores >= 60"></div> <div v-else></div> </div>

完整示例

  • 代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-if="scores >= 90"></div> <div v-else-if="scores >= 80"></div> <div v-else-if="scores >= 60"></div> <div v-else></div> </div> <script> new Vue({ el: "#app", data: { scores: 88, }, }); </script> </body> </html>
  • 输出
复制代码
1
2

多个v-else-if 的判断逻辑

上文的多个 v-else-if是从上到下依次判断

  • 示例

将上例中的中和良交换位置如下:

复制代码
1
2
3
4
5
6
7
<div id="app"> <div v-if="scores >= 90"></div> <div v-else-if="scores >= 60"></div> <div v-else-if="scores >= 80"></div> <div v-else></div> </div>
  • 显示结果
复制代码
1
2

可见多个else-if 是从上到下依次判断的,“良”的结果被“中”截胡了。

2. v-show

2.1 使用

语法示例

复制代码
1
2
<h1 v-show="ok">Hello!</h1>

完整示例

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CROW SONG</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script> new Vue({ el: "#app", data: { ok: true, }, }); </script> </body> </html>

2.2 和v-if 比较

如1.3 v-else-if 中的示例,如果我们直接改成v-show

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CROW SONG</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-show="scores >= 90"></div> <div v-show="scores >= 80"></div> <div v-show="scores >= 60"></div> <div v-show></div> </div> <script> new Vue({ el: "#app", data: { scores: 92, }, }); </script> </body> </html>
  • 输出为
复制代码
1
2
3
4
优 良 中

可见,三条 v-show会分别判断(而不会有逻辑关系)
但1.3中,我们可以看到,v-if虽然在三个div中,仍然会从上到下依次判断


最后

以上就是疯狂小甜瓜最近收集整理的关于Vue.js基础-03-条件语句(v-if/v-show)1. v-if2. v-show的全部内容,更多相关Vue.js基础-03-条件语句(v-if/v-show)1.内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(94)

评论列表共有 0 条评论

立即
投稿
返回
顶部