数组遍历——Vue.js

现在有这样一组数据结构

new Vue({el: '#app',data: {content: [{'level01':'第1组','level02': ['水果', '运动'],'level03': [['苹果', '梨', '香蕉'],['篮球', '足球', '羽毛球']]},{'level01':'第2组','level02': [ '星系', '行星'],'level03': [['银河系', '仙女座星系', '半人马座星系'],['水星', '金星', '地球']]}]}});

要实现如下结果，则在页面修改

<div id="app"><ul><li v-for="item1 in level01">{{item1}}<ul><li v-for="item2 in level02">{{item2}}<ul><li v-for="item3 in level03">{{item3}}</li></ul></li></ul></li></ul>
</div>

那么问题来了，这样修改的话，数据都是写死的。接下来就得考虑另一种写法

new Vue({el: '#app',data: {newContent: {'第1组': {'水果': ['苹果', '梨', '香蕉'],'运动': ['篮球', '足球', '羽毛球']},'第2组': {'星系': ['银河系', '仙女座星系', '半人马座星系'],'行星': ['水星', '金星', '地球']},}}
});

　则HTML修改为

<div id="app"><ul><li v-for="(items, index) in newContent">{{index}}<ul><li v-for="(item, key) in items">{{key}}<ul><li v-for="val in item">{{val}}</li></ul></li></ul></li></ul>
</div>

　　页面显示效果为

转载于:https://www.cnblogs.com/-1212huan/p/7904237.html

数组遍历——Vue.js相关推荐

vue如何把数组转为json数组_vue.js,_vuejs Ajax取得一个数据json数组，vue.js - phpStudy...
vuejs Ajax取得一个数据json数组 vuejs Ajax取得一个数据json数组后,要通取回的数据再做判断一定只能通这种方式或者套template标签 {{item.displayWord ...
Vue.js 2.0 学习重点记录
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...
从template到DOM(Vue.js源码角度看内部运行机制)
写在前面这篇文章算是对最近写的一系列Vue.js源码的文章(github.com/answershuto-)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些产出也会对同样想要学习Vue.j ...
js中php遍历数组,vue.js如何遍历数组
vue.js遍历数组的方法:1.使用foreach循环,代码为[this.urls.forEach(item =>]:2.使用filter循环,代码为[return this.urls.filt ...
vue学习代码理解v-for数组遍历和对象遍历以及事件处理
文章目录 06_列表渲染 07_列表渲染_过滤与排序 08_事件处理 06_列表渲染 <!DOCTYPE html> <html lang="en"> &l ...
html弹窗中遍历数组,有关js各种数组遍历
js数组遍历是在数组操作中经常用到的,前段时间学习vue视频,上边顺带讲解了js数组的遍历方法,当时没有留下笔记,到今天来回想,果然还是忘记了一些,于是还是选择开始在这里记录下来.废话不多说,下面开始 ...
Vue.js中splice()方法实现对数组进行删除的操作
语法结构:splice(index,len,[item]) 1.可以用来添加/删除/替换数组内某一个或者几个值 2.该方法会改变原始数组 index:数组开始下标 len: 替换/删除的长度 item ...
JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
js 数组修改watch_前端面试：专注Vue.js常见的问题答疑，掌握了基本上Vue就过关了...
v-show 与 v-if 区别第一题应该是最简单的,提这个问题,也是想让候选人不那么紧张,因为但凡用过 Vue.js,多少知道 v-show 和 v-if 的区别,否则就没得聊了.不过这最简单的一 ...

数组遍历——Vue.js

数组遍历——Vue.js相关推荐

最新文章

热门文章