所謂的條件，指的就是滿足什么條件，允許做什么事，不滿足時(shí)，是不允許做的。如共享單車，規(guī)定滿12周歲或以上才可以騎行，沒(méi)滿的則不被允許。學(xué)每門編程語(yǔ)言，條件語(yǔ)句都是必須熟練掌握的，Vue3.0的也不例外。

4.1 v-if指令

在Vue3.0中，條件語(yǔ)句是通過(guò)v-if指令實(shí)現(xiàn)的。如果判斷條件為True，就執(zhí)行v-if語(yǔ)句里的內(nèi)容，否則什么都不執(zhí)行。

vue3.0條件語(yǔ)法

老陳說(shuō)編程

輸出結(jié)果

如果v-if為false時(shí)，你不想輸出空氣，不想什么都不執(zhí)行，那就其后面加上v-else指令。v-if和v-else搭在一起使用，規(guī)則是：v-if的條件為true時(shí)，執(zhí)行v-if里的內(nèi)容，否則執(zhí)行v-else里的。

老陳說(shuō)編程

你說(shuō)老陳不酷，那我不說(shuō)編程了，說(shuō)愛(ài)情去。

輸出結(jié)果

當(dāng)然，你可能會(huì)根據(jù)老陳所說(shuō)的編程語(yǔ)言，來(lái)決定老陳是否酷還是不酷，如果說(shuō)的是你想學(xué)的編程語(yǔ)言，你大概率會(huì)說(shuō)酷，甚至說(shuō)很酷，否則就會(huì)說(shuō)不酷，甚至說(shuō)很丑。人性如此，你不用自責(zé)。

為此，我會(huì)說(shuō)多個(gè)編程語(yǔ)言，逐步提高我的顏值。判斷多個(gè)內(nèi)容(語(yǔ)言)，用v-else-if語(yǔ)法。

老陳說(shuō)Vue3.0，很酷

老陳說(shuō)前端，很酷

老陳說(shuō)Java，很酷

老陳說(shuō)App，很酷

老陳說(shuō)Python，也酷

輸出結(jié)果

4.2 template

長(zhǎng)得有點(diǎn)(不是特別)酷的你，可能早就注意到了，v-if指令，都是附加在一個(gè)元素上的；長(zhǎng)得有特別(不是有點(diǎn))丑的你，可能沒(méi)有考慮到，如果想要實(shí)現(xiàn)切換多個(gè)元素，該如何？不用急，特別酷的老陳告訴你：你可以v-if放在 元素中。

老陳

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。
想學(xué)編程的朋友，可關(guān)注今日頭條：老陳說(shuō)編程。
我在分享Python，前端(小程序)、Java和App方面的干貨。
關(guān)注我，沒(méi)錯(cuò)的。

輸出結(jié)果

4.3 v-show指令

如果你要實(shí)現(xiàn)業(yè)務(wù)方面的條件判斷，用v-if指令就可以了；如果只是想切換一下CSS的內(nèi)容，那你可以用v-show指令。v-show只是簡(jiǎn)單地切換元素的CSS屬性值，不支持v-else，也不支持元素，它常用于隱藏或顯示某個(gè)元素。

為了方便講解，我提前說(shuō)了v-on指令和事件，你可以不用理會(huì)，后面我會(huì)詳細(xì)介紹這個(gè)內(nèi)容的。

vue3.0條件語(yǔ)法 報(bào)幕~~~

輸出結(jié)果

好了，有關(guān)條件渲染和template的內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注今日頭條：老陳說(shuō)編程。我在分享Python，前端、Java和App方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。

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

總結(jié)

以上是生活随笔為你收集整理的freemaker if 多个条件_第4天｜14天搞定Vue3.0，条件渲染和template的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。