vue.js 嵌套循环渲染

来源：互联网发布：无缝丝袜淘宝贴吧编辑：程序博客网时间：2024/05/20 02:24

经常用到嵌套循环渲染数据

比如在一个html页面上渲染全国所有的省直辖市及其下辖的市县

省级对市县一般是一对多的关系
在循环遍历省级单位时
需要对他的子集也进行遍历

市县类

public class City implements Serializable {    private static final long serialVersionUID = 1876407617666848861L;    private String cityId;    private String cityName;    private String provincialId;    public String getCityId() {        return cityId;    }    public void setCityId(String cityId) {        this.cityId = cityId;    }    public String getCityName() {        return cityName;    }    public void setCityName(String cityName) {        this.cityName = cityName;    }    public String getProvincialId() {        return provincialId;    }    public void setProvincialId(String provincialId) {        this.provincialId = provincialId;    }    @Override    public String toString() {        return "{" +                "cityId:" + cityId +                ", cityName:" + cityName +                ", provincialId:" + provincialId +                '}';    }}

省级类

public class Provincial implements Serializable {    private static final long serialVersionUID = 1167623414373639514L;    private String provincialId;    private String provincialName;    private List<City> cityList; // 市县的集合      public String getProvincialId() {        return provincialId;    }    public void setProvincialId(String provincialId) {        this.provincialId = provincialId;    }    public String getProvincialName() {        return provincialName;    }    public void setProvincialName(String provincialName) {        this.provincialName = provincialName;    }    public List<City> getCityList() {        return cityList;    }    public void setCityList(List<City> cityList) {        this.cityList = cityList;    }    @Override    public String toString() {        return "{" +                "provincialId:" + provincialId +                ", provincialName:" + provincialName +                ", cityList:" + cityList +                '}';    }}

如果是简单的列表遍历应该不是问题如果是在一些模板中或者html中往往无法在正常情况下使用vue的指令

经过研究vue的 api 发现可以在

                                                         <template></template>

使用避免以下情况

<table border="1" style="border-collapse:collapse">        <tr>            <th>城市序号</th>            <th>城市名称</th>            <th>所属城市代号</th>        </tr>           在下面的tr 标签中   无法加入v-for 来嵌套的情况            <tr >                <th colspan="3">{{pro.provincialName}}</th>            </tr>                          <tr>                    <td>{{city.cityId}}</td>                    <td>{{city.cityName}}</td>                    <td>{{city.provincialId}}</td>                </tr>                    </template>    </table>

代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <script src="${pageContext.request.contextPath}/static/jquery-1.11.3.js"></script>    <script src="${pageContext.request.contextPath}/static/vue-2.2.6.js"></script>    <title></title></head><body><div id="app">    <table border="1" style="border-collapse:collapse">        <tr>            <th>城市序号</th>            <th>城市名称</th>            <th>所属城市代号</th>        </tr>     下面加入2个template  来执行指令 嵌套遍历        <template v-for="pro in cities">            <tr>                <th colspan="3">{{pro.provincialName}}</th>            </tr>            <template v-for="city in pro.cityList">                <tr>                    <td>{{city.cityId}}</td>                    <td>{{city.cityName}}</td>                    <td>{{city.provincialId}}</td>                </tr>            </template>        </template>    </table></div></body><script>    new Vue({        el: '#app',        data: {            cities: ''        },        created: function () {            var $this = this;            var url = '/rycxApi/provincial/allPro';            $.get(url, function (data) {                console.log(data);                $this.cities = data;            })        }    });</script></html>

达到了下面的效果

0 0