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>

最终页面效果图