Vue.js 条件与循环

原创朱雀 2020-06-26 15:01 1474阅读 0赞

# Vue.js 条件与循环

vue中如何做条件判断？

**v-if 指令**

```vue
<template>
<div>
    <p v-if="seen">现在你看到我了</p>
    <div v-if="ok">
      <h1>蒲公英云</h1>
      <p>人可以傻，但梦想必须有</p>
      <p>蒲公英云，创建的思想！</p>
    </div>
</div>

</template>
<script>
export default {
  name: 'MyTemplate',
  data () {
    return {
       seen: true,
       ok: true
    }
  }
}
</script>
```

如果我们想使用文本语法还可以写的更加简化

```vue

{{#if ok}}
  <h1>Yes</h1>
{{/if}}
```

![](/images/1593183615305.png)

运行效果图

![](/images/1593183601558.png)

**v-else 指令**

当然有了if 那else也是必不可少的

```vue
<template>
<div>
    
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>

</template>
<script>
export default {
  name: 'MyTemplate'
}
</script>
```

**v-else-if 指令**

在javascript中我们可以使用if else 以及else if 那在vue中如何使用呢？

```vue
<template>
<div>
    <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>

</template>
<script>
export default {
  name: 'MyTemplate',
  data () {
    return {
       type: 'C'
    }
  }
}
</script>
```

文章版权声明：注明蒲公英云原创文章，转载或复制请以超链接形式并注明出处。

发表评论取消回复

表情：

评论列表（有 0 条评论，1474人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python条件与循环

博文大纲： > > * 一、Python条件判断 > * 二、Python的循环 > * 三、循环的控制 > * 四、Python的循环综合示例 ...

骑猪看日落/ 2024年04月19日 16:36/ 0 赞/ 60 阅读

相关 Vue.js 条件与循环

vue中如何做条件判断？ v-if 指令 > 1. `<template>` > 2. `<div>` > 3. `<p v-if="seen">现在你看到我了</p

秒速五厘米/ 2024年03月30日 10:37/ 0 赞/ 79 阅读

相关 java基础语法——条件判断与循环语句

目录一、流程控制语句流程控制语句分类二、顺序结构顺序结构概述顺序结构图三、选择结构选择结构概述选择结构(if语句1) 选择执行图1 选择结

我会带着你远行/ 2024年03月27日 09:23/ 0 赞/ 59 阅读

相关 Vuejs——（6）Vuejs与form元素

资料来于官方文档： http://cn.vuejs.org/guide/forms.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更

深藏阁楼爱情的钟/ 2022年07月18日 00:14/ 0 赞/ 303 阅读

相关 vuejs与外界通信

源代码：其中在vue项目中用npm安装jquery，vue-resource插件的的命令行： npm install jquery npm install vue-re

深碍√TFBOYSˉ_/ 2022年07月12日 06:12/ 0 赞/ 167 阅读

相关 python条件与循环

一、条件 1.if条件 if condition1: statement_block_1 elif condition_2:

- 日理万妓/ 2022年06月06日 10:19/ 0 赞/ 198 阅读

相关 Scala编程条件控制与循环(二)

if表达式 if表达式的定义：在Scala中，if表达式是有值的，就是if或者else中最后一行语句返回的值。 ·例如，val age = 30; if (age >

待我称王封你为后i/ 2022年05月25日 01:10/ 0 赞/ 205 阅读

相关 Python3条件与循环控制

Python的流程控制语句包括：if条件语句、while循环语句、for循环语句、range函数以及break、continue、pass控制语句。这些语句在Python中的语

迷南。/ 2022年03月18日 04:40/ 0 赞/ 256 阅读

相关 Vue条件与循环

Vue条件与循环在Vue中控制切换一个元素是否显示也相当简单： <div id="app-3"> <p v-if="seen">现在你看到我了</

痛定思痛。/ 2021年10月19日 23:50/ 0 赞/ 435 阅读

相关 Vue.js 条件与循环

Vue.js 条件与循环 vue中如何做条件判断？ v-if 指令 v-else 指令当然有了if 那else也是必不可少的

朱雀/ 2020年06月26日 15:01/ 0 赞/ 1475 阅读