• <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
        網站知識
        當前位置: 主頁 > 網站知識

        vue3key和數組檢測

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

        學習要點:
        1.數組檢測
        2.key 問題
        本節課我們來開始學習 Vue3.x v-for 中的數組檢測和 key 的問題。
        一.數組檢測
        1. 為了更好的渲染視圖,Vue 提供了如下的變更方法,執行后可渲染視圖更新;
        push()/pop()/shift()/unshift()/splice()/sort()/reverse();
        PS:在控制臺輸入 app.array.push({city : '重慶'}),視圖立馬渲染更新;
        2. 如果想替換掉數組的某個選項,可以如下操作:
        // 替換掉第二條的內容
        vm.array[1] = {city : '南京'}
        PSVue 也提供了比如 filter()/concat()/slice()來替換并返回一個新數組;
        vm.array.slice(1,4)
        二.key 問題
        1. 我們要創建一個按鈕,來點擊添加一個選項,具體如下:
        <button v-on:click="add">添加button>
        methods : {
        // 在項目頂端添加一個記錄
        add() {
        this.array.unshift({city : '重慶'})
        }
        },
        PS:此時在渲染端,做一個復選按鈕;
        <li v-for="item in array"><input type="checkbox">{{item.city}}li>
        PS:當我們單擊按鈕時,在列表頂端添加了一個選項,但復選的勾卻錯位了;
        2. 此時,我們需要對每一個項目限定一個唯一的 id 指明來解決這個問題;
        {
        id : 1,
        city : '北京'
        },
        add() {
        this.array.unshift({id : 5, city : '重慶'})
        }
        // v-bind:key 來綁定 id
        <li v-for="item in array" v-bind:key="item.id">
        <input type="checkbox">{{item.city}}
        li>
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

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

        ? 電話咨詢

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

        ? 微信咨詢

        掃碼關注
        點點租

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