Vue.js 条件与循环

vue中如何做条件判断？

v-if 指令

1. <template>
2. <div>
3. <p v-if="seen">现在你看到我了</p>
4. <div v-if="ok">
5. <h1>蒲公英云</h1>
6. <p>人可以傻，但梦想必须有</p>
7. <p>蒲公英云，创建的思想！</p>
8. </div>
9. </div>
11. </template>
12. <script>
13. export default {
14. name: 'MyTemplate',
15. data () {
16. return {
17. seen: true,
18. ok: true
19. }
20. }
21. }
22. </script>

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

1. <!-- Handlebars 模板 -->
2. {{#if ok}}
3. <h1>Yes</h1>
4. {{/if}}

运行效果图

v-else 指令

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

1. <template>
2. <div>
3. <!-- 随机生成一个数字，判断是否大于0.5，然后输出对应信息 -->
4. <div v-if="Math.random() > 0.5">
5. Sorry
6. </div>
7. <div v-else>
8. Not sorry
9. </div>
10. </div>
12. </template>
13. <script>
14. export default {
15. name: 'MyTemplate'
16. }
17. </script>

v-else-if 指令

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

1. <template>
2. <div>
3. <div v-if="type === 'A'">
4. A
5. </div>
6. <div v-else-if="type === 'B'">
7. B
8. </div>
9. <div v-else-if="type === 'C'">
10. C
11. </div>
12. <div v-else>
13. Not A/B/C
14. </div>
15. </div>
17. </template>
18. <script>
19. export default {
20. name: 'MyTemplate',
21. data () {
22. return {
23. type: 'C'
24. }
25. }
26. }
27. </script>