所謂的條件，指的就是滿足什麼條件，允許做什麼事，不滿足時，是不允許做的。如共享單車，規定滿12週歲或以上才可以騎行，沒滿的則不被允許。學每門程式語言，條件語句都是必須熟練掌握的，Vue3.0的也不例外。
4.1 v-if指令在Vue3.0中，條件語句是透過v-if指令實現的。如果判斷條件為True，就執行v-if語句裡的內容，否則什麼都不執行。
如果v-if為false時，你不想輸出空氣，不想什麼都不執行，那就其後面加上v-else指令。v-if和v-else搭在一起使用，規則是：v-if的條件為true時，執行v-if裡的內容，否則執行v-else裡的。
當然，你可能會根據老陳所說的程式語言，來決定老陳是否酷還是不酷，如果說的是你想學的程式語言，你大機率會說酷，甚至說很酷，否則就會說不酷，甚至說很醜。人性如此，你不用自責。
為此，我會說多個程式語言，逐步提高我的顏值。判斷多個內容(語言)，用v-else-if語法。
<div id="app"> <h1 v-if="program === 'Vue3.0'"> 老陳說Vue3.0，很酷 </h1> <h1 v-else-if="program === '前端'"> 老陳說前端，很酷 </h1> <h1 v-else-if="program === 'Java'"> 老陳說Java，很酷 </h1> <h1 v-else-if="program === 'App'"> 老陳說App，很酷 </h1> <h1 v-else> 老陳說Python，也酷 </h1></div><script> Vue.createApp({ data() { return { program: 'Vue3.0' } } }).mount("#app")</script>輸出結果
4.2 template長得有點(不是特別)酷的你，可能早就注意到了，v-if指令，都是附加在一個元素上的；長得有特別(不是有點)醜的你，可能沒有考慮到，如果想要實現切換多個元素，該如何？不用急，特別酷的老陳告訴你：你可以v-if放在 <template> 元素中。
4.3 v-show指令如果你要實現業務方面的條件判斷，用v-if指令就可以了；如果只是想切換一下CSS的內容，那你可以用v-show指令。v-show只是簡單地切換元素的CSS屬性值，不支援v-else，也不支援<template>元素，它常用於隱藏或顯示某個元素。
為了方便講解，我提前說了v-on指令和事件，你可以不用理會，後面我會詳細介紹這個內容的。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>vue3.0條件語法</title> <script src="vue.global.js"></script> <style> .show { margin-top: 20px; width: 600px; height: 50px; background: darkcyan; } </style></head><body><div id="app"> <input type="button" value="按下就報幕" v-on:click="show()"> <br/> <div class="show" v-show="report">報幕~~~</div></div><script> Vue.createApp({ data() { return { report: false } }, methods: { show() { this.report = true; } } }).mount("#app")</script></body></html>輸出結果
#前端##Vue.js##JavaScript##程式設計師##Web#
最新評論