<
div class
=
"listContent"
v-for
=
"item in list"
:key
=
"item.id"
>
<
span
>
{
{
item.create_time_i
|
formatDate
}
}
<
/span
>
<
div class
=
" van-hairline--top van-hairline--bottom order-cc"
style
=
"padding:10px 0"
v-for
=
"goods in item.goods"
:key
=
"goods.id"
>
<
van-image
radius
=
"5"
width
=
"50px"
height
=
"50px"
:src
=
"img+goods.image"
<
div class
=
"order-dd"
>
<
span class
=
"van-ellipsis title"
>
{
{
goods.product
}
}
<
/span
>
<
div class
=
"order-dd-aa"
>
<
div class
=
"desc"
>
{
{
goods.desc
}
}
<
/div
>
v-for里面再嵌套一个v-for的写法list:[ id:'', goods:[ images:'', product:'', desc:'' ]]<div class="listContent" v-for="item in list" :key="item.id"> <span>{{item.create_time_i | formatDate}}</span> <div class=" van-hair
实现v-for循环
嵌套
首先要明白其中的逻辑关系，笔者本次项目中使用的是双层列表
嵌套
，通过关联这两层进行数据传输。首先通过v-for传入数据，实现外层元素循环，然后再通过内外侧关联，将内层数据传到对应的外层进行循环渲染。
1、对外层标签使用v-for进行数据绑定，循环渲染数据
给外层标签使用v-for进行数据绑定，然后在对应标签用mastache（双大括号）传值
2、给内层数据做同样处理，v-for绑定进行数据循环渲染，双大括号在对应的标签内插值
注意：在对第二层数据使用v-for的时候命名要与外层关联
<div v-for="goods_list in goods_lists">
<div v-for="good in goods_list.goods">
<img class="menu_goods_img" :src="good.src">
使用v-for循环的目的就是为了处理大量类型重复的数据，归根结底是一种有规律的数据，但是有些规律却不是那么容易的，很多时候，我们会使用到循环，甚至多重循环的
嵌套
，不同的循环
嵌套
对应着不同的json数据的结构，本篇主要讲述的是使用v-for循环解决部分同，部分不同的情况，主要是针对表格table来使用的。
模拟的json数据如下：
"name":"小王",
"age":20,
"ph...
<view class="" >
<view class="content" v-for="(item,index) in qqcy">
<view class="box" @tap="skillIdx=index">
门派：{{ item.address }} 代表：{{ item.represent }}
</view>
<!-- 要展示的列表 item.member是根据上一层的.
$("dd [type='checkbox']").change(function () {
var cname = $(this).prop("name");
$("[name="+cname+"]").prop("checked",$(this).prop("checked"));
$(".auth_rul
v-for和v-if是在
Vue.js
中非常常用的指令，它们的不同之处在于v-for被用于循环渲染数据，而v-if被用于条件渲染元素。因此，如果我们需要在
一个
v-for循环内部有条件渲染元素的需求，就需要将v-for和v-if一起使用。
一般情况下，在v-for循环语句上使用v-if，如下所示：
<li v-for="item in items" v-if="item.visible">
{{ item.name }}
在上面的例子中，我们只会渲染数组中visible属性为true的元素，这就是v-if的作用。注意到v-if在v-for循环语句内部，这意味着我们在每次循环时都会对当前的item对象进行判断，以决定是否渲染当前元素。这样我们就能在
一个
循环中根据条件渲染元素了。
另
一个
可能会用到的场景是，在v-for中
嵌套
v-if，显示某些元素的时候需要通过v-if针对遍历的对象进行进一步的判断。这时可以在v-for的循环语句内使用“对象解构”的
写法
，如下所示：
<li v-for="{ name, age, visible } in items">
<div v-if="visible">
{{ name }} ({{ age }})
在上面的例子中，我们通过对象解构方式将循环的item对象进行拆解，并且只显示visible为true的元素。这是一种更加简洁的
写法
。
总之，v-for和v-if一起使用，能够非常方便地实现条件渲染的需求，这是
Vue.js
中常用的语法技巧之一。
