Vue.js基础-03-条件语句（v-if/v-show）

文章目录

1. v-if
2. v-show

1. v-if

1.1 v-if

语法示例

 <p v-if="show">甲</p>

完整示例

如下：

如果show是false，则甲不会显示。
如果ok是flase template中三奇六仪的信息都不会显示
但是show和template我们都设置了true，所以有后边的输出。

 <!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

语法示例

     <div id="app">
      <div v-if="Math.random()*100 >= 60">及格了</div>
      <div v-else>不及格</div>
    </div>

完整示例

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

 <!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

语法示例

     <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>

完整示例

代码

 <!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>

输出

良

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

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

示例

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

     <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>

显示结果

中

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

2. v-show

2.1 使用

语法示例

  <h1 v-show="ok">Hello!</h1>

完整示例

 <!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

 <!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>

输出为

 优
良
中

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

posted on 2022-05-14 13:52 运维开发玄德公阅读(32) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

· Vue.js 基础-02-模板语法（常用指令v-html/v-bind/v-if/v-model/v-on，插值，参数，修饰符，缩写）

· vue(vue.js) —条件渲染(v-if、v-show)

· Vue2.0 学习第三组条件语句

· 总结vue3 的一些知识点：Vue.js 条件语句

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

Vue.js基础-03-条件语句（v-if/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 比较

导航

统计

合集

	<!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>

	<div id="app">
	<div v-if="Math.random()*100 >= 60">及格了</div>
	<div v-else>不及格</div>
	</div>

	<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>