Chinaunix首页 | 论坛 | 博客

开发者学习指南的ChinaUnix博客

首页　| 　博文目录　| 　关于我

开发者学习指南

  • 博客访问： 80561
  • 博文数量： 52
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 540
  • 用 户 组： 普通用户
  • 注册时间： 2019-05-29 11:52
文章分类

全部博文（52）

文章存档

2019年（52）

我的朋友
最近访客
推荐博文
Vue.js 条件与循环

分类： JavaScript

2019-06-04 14:00:18

来源：阿里云大学——开发者课堂——Vue.js自学手册

条件判断

v-if

条件判断使用 v-if 指令：

v-if 指令

在元素 和 template 中使用 v-if 指令：


  1. <!DOCTYPE html>

  3. <html>

  5. <head>

  7. <meta charset="utf-8">

  9. <title>Vue 测试实例 - 阿里云大学(/edu.aliyun.com)</title>

  11. <script src=""></script>

  13. </head>

  15. <body>

  17. <div id="app">

  19.     <p v-if="seen">现在你看到我了</p>

  21.     <template v-if="ok">

  23.       <h1>阿里云大学</h1>

  25.       <p>学的不仅是技术，更是梦想！</p>

  27.       <p>哈哈啥，打字辛苦啊！！！</p>

  29.     </template>

  31. </div>

  33.    

  35. <script>

  37. new Vue({

  39.   el: '#app',

  41.   data: {

  43.     seen: true,

  45.     ok: true

  47.   }

  49. })

  51. </script>

  53. </body>

  55. </html>


这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：




  3. {{#if ok}}

  5.   <h1>Yes</h1>

  7. {{/if}}


v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

v-else 指令

随机生成一个数字，判断是否大于0.5，然后输出对应信息：


  1. <!DOCTYPE html>

  3. <html>

  5. <head>

  7. <meta charset="utf-8">

  9. <title>Vue 测试实例 - 阿里云大学(edu.aliyun.com)</title>

  11. <script src=""></script>

  13. </head>

  15. <body>

  17. <div id="app">

  19.        <div v-if="Math.random() > 0.5">

  21.          Sorry

  23.        </div>

  25.        <div v-else>

  27.          Not sorry

  29.        </div>

  31. </div>

  33.       

  35. <script>

  37. new Vue({

  39.   el: '#app'

  41. })

  43. </script>

  45. </body>

  47. </html>


运行结果


  1. Sorry


v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

v-else 指令

随机生成一个数字，判断是否大于0.5，然后输出对应信息：


  1. <!DOCTYPE html>

  3. <html>

  5. <head>

  7. <meta charset="utf-8">

  9. <title>Vue 测试实例 - 阿里云大学(edu.aliyun.com)</title>

  11. <script src=""></script>

  13. </head>

  15. <body>

  17. <div id="app">

  19.     <div v-if="type === 'A'">

  21.       A

  23.        </div>

  25.        <div v-else-if="type === 'B'">

  27.          B

  29.        </div>

  31.        <div v-else-if="type === 'C'">

  33.          C

  35.        </div>

  37.        <div v-else>

  39.          Not A/B/C

  41.        </div>

  43. </div>

  45.       

  47. <script>

  49. new Vue({

  51.   el: '#app',

  53.   data: {

  55.     type: 'C'

  57.   }

  59. })

  61. </script>

  63. </body>

  65. </html>


v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。


来自：


语法。

来自：阿里云大学——开发者课堂——Vue.js自学手册

阅读(447) | 评论(0) | 转发(0) |
0

上一篇：怎样学CSS？

下一篇：Python CGI编程

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6