Vue.js 条件与循环

原创朱雀 2020-06-26 15:01 1491阅读 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 条评论，1491人围观）

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

相关阅读

相关 Python条件与循环

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

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

相关 Vue.js 条件与循环

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

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

相关 python条件循环

![a495526e3af74a3290f754b317762f4e.jpeg][] python条件循环 Python中的条件循环，可以用来解决

偏执的太偏执、/ 2023年10月09日 23:46/ 0 赞/ 19 阅读

相关掌握条件与循环

1.条件语句: 形式： f 判断语句 : 执行语句1 elif 判断语句2：执行语句2 elif 判断语句3：执行语句3 else: 执

绝地灬酷狼/ 2023年06月09日 15:25/ 0 赞/ 10 阅读

相关 Task02：条件与循环

Task02：条件与循环条件条件语句的执行过程 if语句 assert 关键词三元操作符例1

谁借莪１个温暖的怀抱￠/ 2023年06月09日 15:22/ 0 赞/ 20 阅读

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

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

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

相关 python条件与循环

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

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

相关 Python3条件与循环控制

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

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

相关 Vue条件与循环

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

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

相关 Vue.js 条件与循环

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

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