• <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:32:58???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.循環列表指令
        本節課我們來開始學習 Vue3.x 的循環列表指令 v-for 的使用方式。
        一.循環列表指令
        1. 使用 v-for 指令來渲染一個列表,其中 array 是數據源,item 是元素別名;
        <ul>
        <li v-for="item in array">{{item.city}}li>
        ul>
        data() {
        return {
        array : [
        {
        city : '北京'
        },
        {
        city : '上海'
        },
        {
        city : '廣州'
        },
        {
        city : '深圳'
        }
        ]
        }
        },
        PS:也可以在遍歷的元素項中設置 index,來獲取有序編號,從 0 開始的;
        <li v-for="(item, index) in array">{{index}}.{{item.city}}li>
        PS:這里的 in 可以使用 JS 迭代器語法 of(item, index) of array;
        PSindex 參數在第二位置,item 在第一個參數位置;
        2. 如果數據是一個對象,內部包含多個屬性,那也可以使用 v-for 遍歷;
        <ul>
        <li v-for="item in object">{{item}}li>
        ul>
        data() {
        return {
        object : {
        name : 'Mr.Lee',
        gender : '',
        age : 100
        }
        }
        }
        PS:這里支持(value, name, key)的參數,支持單獨輸出;
        <li v-for="(value, name, key) in object">{{key}}.{{name}}.{{value}}li>
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区