• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3條件判斷渲染

        發布時間:2023-02-20 21:25:50???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.條件顯示指令
        本節課我們來開始學習 Vue3.x 的條件判斷渲染 v-if 的使用方式。
        一.條件顯示指令
        1. 先復習一下前面課程中 v-if 指令的簡單用法:通過布爾屬性隱藏或顯示:
        <div v-if="flag">我是否顯示div>
        data() {
        return {
        flag : true
        }
        },
        2. 當然,也支持 v-else 的條件判斷,具體如下:
        <div v-if="flag">我是否顯示div>
        <div v-else>404div>
        PS:如果布爾值為 false,則顯示 404;
        3. 如果有多個分支判斷的話,支持加入 v-else-if 的判斷比較,具體如下:
        <div v-if="type === 'A'">Adiv>
        <div v-else-if="type === 'B'">Bdiv>
        <div v-else-if="type === 'C'">Cdiv>
        <div v-else>404div>
        PS:屬性里設置 type : 'B',最后顯示 B;
        4. 如果條件判斷的區域是一大段代碼,我們可以使用