所谓的条件，指的就是满足什么条件，允许做什么事，不满足时，是不允许做的。如共享单车，规定满12周岁或以上才可以骑行，没满的则不被允许。学每门编程语言，条件语句都是必须熟练掌握的，Vue3.0的也不例外。

4.1 v-if指令

在Vue3.0中，条件语句是通过v-if指令实现的。如果判断条件为True，就执行v-if语句里的内容，否则什么都不执行。

    vue3.0条件语法

输出结果

如果v-if为false时，你不想输出空气，不想什么都不执行，那就其后面加上v-else指令。v-if和v-else搭在一起使用，规则是：v-if的条件为true时，执行v-if里的内容，否则执行v-else里的。

输出结果

当然，你可能会根据老陈所说的编程语言，来决定老陈是否酷还是不酷，如果说的是你想学的编程语言，你大概率会说酷，甚至说很酷，否则就会说不酷，甚至说很丑。人性如此，你不用自责。

为此，我会说多个编程语言，逐步提高我的颜值。判断多个内容(语言)，用v-else-if语法。

输出结果

4.2 template

长得有点(不是特别)酷的你，可能早就注意到了，v-if指令，都是附加在一个元素上的；长得有特别(不是有点)丑的你，可能没有考虑到，如果想要实现切换多个元素，该如何？不用急，特别酷的老陈告诉你：你可以v-if放在 元素中。

输出结果

4.3 v-show指令

如果你要实现业务方面的条件判断，用v-if指令就可以了；如果只是想切换一下CSS的内容，那你可以用v-show指令。v-show只是简单地切换元素的CSS属性值，不支持v-else，也不支持元素，它常用于隐藏或显示某个元素。

为了方便讲解，我提前说了v-on指令和事件，你可以不用理会，后面我会详细介绍这个内容的。

    vue3.0条件语法

输出结果

好了，有关条件渲染和template的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。

#前端##Vue.js##JavaScript##程序员##Web#