vue.js多层嵌套列表渲染
简单利用vue实现多层嵌套列表渲染效果图如下效果图如下html部分<ul><template v-for="(item, index) in wjList"><li class="voteList-li" v-for="newItem in item" v-on:cli
·
简单利用vue实现多层嵌套列表渲染
效果图如下
- 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>
- 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>
这样一个简单的多层嵌套列表就实现了。
更多推荐
已为社区贡献16条内容
所有评论(0)