vue.js 数据循环数据v-for及v-for的数据嵌套循环

原创于 2018-09-27 14:57:31 发布 · 4.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #嵌套for循环

本文介绍如何在Vue.js中使用v-for指令进行数据循环与嵌套循环，展示了一个具体的示例，包括自定义JSON数据结构，并在HTML模板中通过v-for指令遍历显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.js 数据循环数据v-for及v-for的数据嵌套循环

在js中自定义一个json

<script>
export default {
    data () {
        return {     
            //自定义循环数据
            parameters: [
                            {
                                "name":"Estee Lauder",
                                "totale":[
                                    {"name":"Clenacer","percentage":"30%"},
                                    {"name":"Clenacer","percentage":"30%"},
                                    {"name":"Clenacer","percentage":"28%"},
                                    {"name":"Clenacer", "percentage":"30%"}
                                ]
                            }
        }
    }
}
</script>

html及页面模板的代码

<template>
	<div class="media-box" v-for="parameter in parameters" :key="parameter.id">
		<div class="media row">
			<div class="media-body product-data">
	      			 <h6 class="mt-0">{{parameter.name}}</h6>
	       			<ul class="media-body-percent">
					<li v-for="tot in parameter.totale" :key="tot.id">
                        			{{tot.name}} <label>{{tot.percentage}}</label>
                      			 </li>				   
				</ul>
			</div>
		</div>
	</div>
</template>

最终页面效果图
在这里插入图片描述