vue.js多层嵌套列表渲染

简单利用vue实现多层嵌套列表渲染

• 效果图如下

效果图如下

1. html部分

<ul>
   <template v-for="(item, index) in wjList">
   	<li class="voteList-li" v-for="newItem in item" v-on:click="addClassFun(index)">
   		<a v-bind:class='{voteListOn:index==indexFun}' href="###">
   			<img :src='newItem.src' alt="" />
   			<ul class="voteList-text">
   				<li><i class="i-one"></i>{{newItem.title}}</li>
   				<li><i class="i-two"></i>{{newItem.time}}</li>
   				<li><i class="i-three"></i>{{newItem.remarks}}</li>
   			</ul>
   		</a>
   	</li>
   </template>
</ul>

3. js部分

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				//问卷列表
				indexFun: "0",
				wjList: [{
					item: {
						src: "../images/vote_open02.png",
						title: "对众智传学用户体验度的调查",
						time: "发布时间：2018-12-01 15:36",
						remarks: "备注：已有45名同学参与了答卷"
					}
				}, {
					item: {
						src: "../images/vote_open02.png",
						title: "对众智传学用户体验度的调查",
						time: "发布时间：2018-12-01 15:36",
						remarks: "备注：已有45名同学参与了答卷"
					}
				}, {
					item: {
						src: "../images/vote_open02.png",
						title: "对众智传学用户体验度的调查",
						time: "发布时间：2018-12-01 15:36",
						remarks: "备注：已有45名同学参与了答卷"
					}
				}, {
					item: {
						src: "../images/vote_open02.png",
						title: "对众智传学用户体验度的调查",
						time: "发布时间：2018-12-01 15:36",
						remarks: "备注：已有45名同学参与了答卷"
					}
				}]
			},
			methods: {
				//左侧列表点击添加class
				addClassFun: function (id) {
					this.indexFun = id;
				},
			}
		})
	</script>

这样一个简单的多层嵌套列表就实现了。