vue.js实现基于v-for的Json数组对象列表数据示例的批量渲染

本文中，vue.js实现了基于v-for的Json数组对象列表数据的批量渲染。分享给大家参考，如下：

Vuejs的出现减轻了DOM的直接操作，为我们用v-for渲染列表数据提供了极大的便利。甚至复杂的Json数组对象也可以使用多层嵌套的v-for来实现，格式如下：

项目中的Div v-for='(项目，索引)项目中的div v-for='(列表，索引)项目。list '/div div假设当前的HTML、VUE文本格式如下：

div id=' app ' class=' columns ' div class=' columns ' div class=' card ' div class=' card-content ' div id=' data ' class=' columns Is-multiline ' div class=' columns-half ' div class=' media ' div class=' media-content ' p class=' has-text-weight-bold '职业知识/p p class='help '职业树提供的职业数据框架。可以从专业能力、知识、技能、活动、内容等方面进行探索和规划。/p/div/div class=' message-body ' div class=' field button ' a interest:/a span常见任务和环境首选项/span/div/div/div/div/div要呈现的JSON数组对象格式如下

Var allData=[{'id': '专业知识'，' name': '分析各行业专业信息，分析主要因素'，' list ' :[{'title': '兴趣'，' description ' : '偏好的常见任务和环境' { title ' : '价值观'，' description ' : '个人满意度的关键方面' }，{ ' title ' : '技能'，' description ' 3: '培养了学习和工作的能力Name': '提供除本职业以外的扩展知识等方面'，' list ' :[{'title': '活动'，' description ' : '常见工作行为类型' }，{ ' title ' : '内容'，' description ' { title ' : '能力'，' description ' : '个人基本持久属性' }]}]；使用VUE操作呈现列表，并首先按以下格式为文本分配相应的字段值：

items ' div class=' column is-half ' v-for='(item，Index)items ' div class=' media ' div class=' media-content ' p class=' has-text-weight-bold ' { item . id } }/p p p class=' help ' { item . name } }/p/div/div class=' message-body ' v-for='(list，Index)item。列出' div class='字段按钮' a {{list。title } }:/a span { { list }。description } }/span/div/div/div js操作，介绍vuejs，创建一个实例并渲染到指定对象(介绍链接请移至https://cn.vuejs.org/,官网)

脚本src=' http :https://cdn . jsdeliver . net/NPM/[email protected]/dist/vue . js '/scriptvarvm=new vue({ El : ' # app '，data : { items : all data } })vue呈现列表数据完成。接下来，看看本机JS如何呈现列表数据：

本机JS操作数组的值是循环的。使用中的直接操作对象，或使用循环直接取值，格式如下：

for(值中的var键){ }；for(var I=0；ivalues.lengthI ){}，根据情况采取任意方法演示两种方法的使用

函数Id(Id){返回文档。getelementbyid(Id)；//获取模块的标识}函数getData(所有数据){ var data=ID(' data ')；var html=for(all DATa中的var I){//外层循环获取标志信息定义变量列表=' ';for(var j=0；jaldata[I]。名单。长度；j ){ //内层循环渲染详细列表项list='div class='消息正文' ' div类='字段按钮' ' a class=' '' allData[i].列表[j].标题：/a"span"all DATa[I].列表[j].描述/span ' '/div ' '/div '；} html='div class='列为-half ' ' ' div class=' media ' ' ' div class=' media-content ' ' ' p class=' has-text-weight-bold ' '所有数据[I].id/p ' p class=' help ' ' all DATa[I].名称/p' '/div' '/div '列表/将内层渲染好的列表项模块添加到外层大模块中/div '；} data.innerHTML=html//像指定的身份模块追加内容}//调用渲染数据方法并传递参数数据数组对象getData(所有数据)；最终，VUE，原生射流研究…渲染出来的列表数据效果均如下：

希望本文所述对大家vue.js程序设计有所帮助。