记录一次vue中json的循环

最新推荐文章于 2025-10-15 14:46:59 发布

原创最新推荐文章于 2025-10-15 14:46:59 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

json

3 篇文章

订阅专栏

这篇博客详细记录了一次在Vue项目中处理JSON数据并进行循环渲染的过程，包括常见和不常见的方法，配以实际效果展示，旨在分享和学习。

比较常见的循环：

          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in traceDataList"
              :key="index"
              :timestamp="dateFormat(item.Timestamp)"
              placement="top">
                {{item.Value}}
            </el-timeline-item>
          </el-timeline>

上效果图：

还有一种不常见的循环（针对我来说）：

<el-timeline>
	<el-timeline-item
	  v-for="(item, index) in traceDataList"
	  :key="index"
	  :timestamp="dateFormat(item.Timestamp)"
	  placement="top">
	    <div v-for="(item2,key) in item.Value" :key="key">{{key}}:{{item2}}</div>
	    <!-- {{item.Value}} -->
	</el-timeline-item>
</el-timeline>

上效果图：

还有一种，

<el-timeline>
	<el-timeline-item
	  v-for="(item, index) in traceDataList"
	  :key="index"
	  :timestamp="dateFormat(item.Timestamp)"
	  placement="top">
	    <div v-for="(item2,key,index) in item.Value" :key="index">{{index}}:{{key}}:{{item2}}</div>
	    <!-- {{item.Value}} -->
	</el-timeline-item>
</el-timeline>

效果图：