javascript - 数组的过滤和渲染
问题描述
var data = [{
label: ’分类一’, value: ’0’}, { label: ’分类二’, value: ’1’}, { label: ’分类三’, value: ’2’}, { label: ’分类四’, value: ’3’}, { label: ’分类五’, value: ’4’}, { label: ’分类六’, value: ’5’}]
<p class='text'>
<span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</p>
求教,请问如何能够最简单的根据数据里的value值在 dom 里渲染出相应的label值??数据是不定的,可能里面会有十几二十个
问题解答
回答1:楼上的的方式可以做到,但是这样就相当于每次都生命一个变量,每一次都往.text里面添加了span节点,操作了DOM,造成很大的开销!我个人建议用下面这个方式。
var opText= document.querySelector(’.text’),var _text='';data.forEach(function(item){ //把每一次遍历的label加上节点,再储存在_text上。 _text += ’<span>’+item.label+’</span>’;});//最后直接把_text赋值到opText.innerHTML上。opText.innerHTML=_text ;回答2:
var container = document.querySelector(’.text’)data.forEach(function(item){ var span = document.createElement(’span’) span.innerHTML = item.label span.setAttribute(’value’, item.value) container.appendChild(span)})回答3:
楼上的方法都是可行的,不过前两中方法在火狐跟chrome下的性能各有优缺点,现在普遍做法上通过创建一个新的空白的文档片段( DocumentFragment)。
const $container = document.querySelector(’.text’);const fragment = document.createDocumentFragment();data.map(item => { let span = document.createElement('span'); span.textContent = item; fragment.appendChild(span);});$container.appendChild(fragment);回答4:
var data = [{ label: ’分类一’, value: ’0’}, { label: ’分类二’, value: ’1’}]// 根据value获取dataList中对应的项function getLabelByValue(dataList, value) { return dataList.find(function (item) { return item.value === value // 这里使用的强等,根据情况可选 == })}// 省略DOM操作let label = getLabelByValue(data, ’0’) // 分类一
相关文章:
1. angular.js - angular2动态显示隐藏组件问题2. angular.js - 用angular2-cli打包项目之后,跳转路由刷新会报404的错误3. angular.js - 在用会话存储传递参数时,使用angularjs冲突4. angular.js - 请教angularjs里html和js通信的问题5. angular.js - 我想实现打印angular $scope数据,代码如何实现呢?求教(如下图)6. node.js - 怎么在初始化的时候使得一个子组件不加载?7. angular.js - angular-ueditor使用中,插入图片,加载完成后不更新angularmodel的问题;8. 新人做网站求帮助9. javascript - Webpack resolve.alias does not work with typescript?10. javascript - 关于单选框的问题,小白一枚,希望有人帮帮忙