原生JS 批量渲染 Json数组对象列表数据（基于vue:v-for渲染列表数据原理的思考）

Vuejs的出现减轻了对DOM的直接操作，同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便。即使是复杂的 Json数组对象，也可以使用 多层嵌套的 v-for 实现，格式如下：

<div v-for="(item,index) in items">

    <div v-for="(list,index) in item.lists"></div>

<div>

假设当前的HTML,VUE 文本格式如下：

<div id="app" class="columns">
    <div class="column">
        <div class="card">
            <div class="card-content">
                <div id="data" class="columns is-multiline ">
                    <div class="column is-half">
                        <div class="media">
                            <div class="media-content">
                                <p class="has-text-weight-bold">职业知识</p>
                                <p class="help">生涯树提供的职业数据框架，可以从职业能力、知识、技能、活动、内容方面进行探索和规划</p>
                            </div>
                        </div>
                        <div class="message-body">
                            <div class="field buttons">