动态配置dom的顺序
对于页面上的dom元素,如果想要通过一个数组来确定一组dom元素的顺序,如果vue element 都是很简单可以实现的
创新互联-专业网站定制、快速模板网站建设、高性价比小店网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式小店网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖小店地区。费用合理售后完善,10余年实体公司更值得信赖。
- {{item.name}}
js:
...
data:function(){
return{
lidata:[{"id":"1","name":"刘明"},
{"id":"2","name":"张飞"},
{"id":"3","name":"关羽"}]
}
}
...
但是如果是jquery 怎么弄呢?一个一个比较之后重新插入效率是有点低的
所以我做了个简单优化
farraysort: function (keyarray) {
//数组排序 e1,e2对应div 的id
/**
* [e1:
*,e2,
* e3,
* e4];
*/
// keyarray = ["e1, "e2", "e3", "e4",];//默认值
var oldKeyarray = JSON.parse(localStorage.getItem("sortKey"));
var issame = true;//判断数组是否有变化
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")
};
//创建Fragment
var elementfrag = document.createDocumentFragment();
keyarray.forEach(function (item) {//创建dom片段
elementfrag.appendChild(array[item]);
});
//一次性插入
document.getElementById("sortContainer").appendChild(elementfrag);
}
这个diff应该还有很多改进的空间,有时间再研究
名称栏目:动态配置dom的顺序
转载来于:http://azwzsj.com/article/pchpsc.html