真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

  
    
      
        
          
            
              
                職業(yè)知識(shí)

                生涯樹(shù)提供的職業(yè)數(shù)據(jù)框架，可以從職業(yè)能力、知識(shí)、技能、活動(dòng)、內(nèi)容方面進(jìn)行探索和規(guī)劃

              

需要渲染的JSON數(shù)組對(duì)象格式如下：

var allData = [
  {
    "id":"職業(yè)知識(shí)",
    "name":"關(guān)于各行業(yè)職業(yè)信息的分析，主要因素分析",
    "lists":[
      {
        "title":"興趣",
        "describe":"常見(jiàn)的任務(wù)和環(huán)境的偏好"
      },
      {
        "title":"價(jià)值觀",
        "describe":"個(gè)人滿意度的關(guān)鍵方面"
      },
      {
        "title":"技能",
        "describe":"學(xué)習(xí)發(fā)展、組織協(xié)作和資源管理的發(fā)達(dá)能力"
      }
    ]
  },
  {
    "id":"職業(yè)擴(kuò)展",
    "name":"提供除本職業(yè)之外的擴(kuò)展知識(shí)等各個(gè)方面",
    "lists":[
      {
        "title":"活動(dòng)",
        "describe":"常見(jiàn)的工作行為類型"
      },
      {
        "title":"內(nèi)容",
        "describe":"工作性質(zhì)的物理和社會(huì)因素"
      },
      {
        "title":"能力",
        "describe":"個(gè)人基本持久屬性"
      }
    ]
  }
];

使用VUE操作渲染列表，先對(duì)文本分配對(duì)應(yīng)的字段值，格式如下：

  
    
      {{ item.id }}

      {{ item.name }}

    
  
  
    
      {{ list.title}}：
      {{ list.describe}}
    
  

JS操作，引入 vuejs，創(chuàng)建實(shí)例渲染到指定對(duì)象（引入鏈接請(qǐng)移步到官網(wǎng) https://cn.vuejs.org/）

var vm = new Vue({ el: '#app', data: { items:allData }})

VUE渲染列表數(shù)據(jù)完成，就是這么簡(jiǎn)單。接下來(lái)看看 原生JS 是如何渲染列表數(shù)據(jù)的：

原生JS操作數(shù)組取值：循環(huán)。使用 for in 直接操作對(duì)象，或者 for循環(huán)直接取值，格式如下：

for(var key in values){}；for(var i=0;i

function Id(id) {
  return document.getElementById(id); //獲取模塊的ID
}
function getData(allData) {
  var data = Id("data");
  var html='';
  for(var i in allData){ //外層循環(huán)獲取標(biāo)志信息
    var list = '';
    for(var j=0;j'+
          ''+
            ''+allData[i].lists[j].title+'：'+
            ''+allData[i].lists[j].describe+''+
          ''+
        '';
    }
    html+=''+
        ''+
          ''+
          ''+allData[i].id+'
'+
          ''+allData[i].name+'
'+
          ''+
        ''+list+  //將內(nèi)層渲染好的列表項(xiàng)模塊添加到外層大模塊中
      '';
  }
  data.innerHTML = html; //像指定的ID模塊追加內(nèi)容
}
//調(diào)用渲染數(shù)據(jù)方法并傳遞參數(shù) JSON數(shù)組對(duì)象
getData(allData);

最終，VUE ，原生JS 渲染出來(lái)的列表數(shù)據(jù)效果均如下：

以上是“vue.js基于v-for如何實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！