對于頁面上的dom元素，如果想要通過一個數(shù)組來確定一組dom元素的順序，如果vue element 都是很簡單可以實現(xiàn)的

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比小店網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式小店網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋小店地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

 <ul>
                <li  v-if="item in lidata" :id="item.id">{{item.name}}</li>
        </ul>

js:

...

data：function(){
    return{
            lidata:[{"id":"1","name":"劉明"},
            {"id":"2","name":"張飛"},
            {"id":"3","name":"關(guān)羽"}]
    } 

}

...

但是如果是jquery 怎么弄呢？一個一個比較之后重新插入效率是有點低的

所以我做了個簡單優(yōu)化

farraysort: function (keyarray) {
            //數(shù)組排序 e1,e2對應div 的id
            /**
             * [e1:  
             *,e2,  
             * e3,
             * e4];
             */
            // keyarray = ["e1, "e2", "e3", "e4",];//默認值
            var oldKeyarray = JSON.parse(localStorage.getItem("sortKey"));
            var issame = true;//判斷數(shù)組是否有變化
            if (oldKeyarray) {
                console.log(oldKeyarray.construct);
                oldKeyarray.forEach(function (item, index) {
                    if (item !== keyarray[index]) {
                        issame = false;
                        return;
                    }
                });
                if (issame) {//如果順序一致就不用排序了。針對刷新頁面
                    return;
                } else {
                    localStorage.setItem("sortKey", JSON.stringify(keyarray));
                }
            } else {//順序存在本地，便于比較
                localStorage.setItem("sortKey", JSON.stringify(keyarray));
            }

                        //將對應dom元素獲取到放到一個對象中
            var array =
            {
                "e1": document.getElementById("e1"),
                "e2": document.getElementById("e2"),
                "e3": document.getElementById("e3"),
                "e4": document.getElementById("e4")
            };
                        //創(chuàng)建Fragment

            var elementfrag = document.createDocumentFragment();
            keyarray.forEach(function (item) {//創(chuàng)建dom片段
                elementfrag.appendChild(array[item]);
            });
                        //一次性插入
            document.getElementById("sortContainer").appendChild(elementfrag);

        }

            這個diff應該還有很多改進的空間，有時間再研究

網(wǎng)頁題目：動態(tài)配置dom的順序
本文網(wǎng)址：http://m.2m8n56k.cn/article32/pchpsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、Google、云服務器、網(wǎng)站設計、微信小程序、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)