Vue.js 条件与循环

秒速五厘米 2024-03-30 10:37 34阅读 0赞

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>`
> 10. 
> 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.  ``
> 2.  `{ {#if ok}}`
> 3.  `<h1>Yes</h1>`
> 4.  `{ {/if}}`

![73442ab03845b98fb2e3b3c3dcbdbef1.png][]

运行效果图

![c4a8f602c9bcbe806719359af73b642a.png][]

**v-else 指令**

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

> 1.  `<template>`
> 2.  `<div>`
> 3.  ``
> 4.  `<div v-if="Math.random() > 0.5">`
> 5.  `Sorry`
> 6.  `</div>`
> 7.  `<div v-else>`
> 8.  `Not sorry`
> 9.  `</div>`
> 10. `</div>`
> 11. 
> 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>`
> 16. 
> 17. `</template>`
> 18. `<script>`
> 19. `export default {`
> 20. `name: 'MyTemplate',`
> 21. `data () {`
> 22. `return {`
> 23. `type: 'C'`
> 24. `}`
> 25. `}`
> 26. `}`
> 27. `</script>`

[73442ab03845b98fb2e3b3c3dcbdbef1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4b4c973152c44f05bfb657aca3099451.png
[c4a8f602c9bcbe806719359af73b642a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b05884bdbb954f4b9949867dfc7f18eb.png