当前阅读教程:Vue.JS入门教程 > v-for 循环指令和if语句处理对象中嵌套对象 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: v-for 循环指令 对象数组的内容显示 | 下一篇: Vue.js 样式绑定 |
我们在下面示例 中定义了一个包含对象的对象(对象嵌套),我们在循环显示对象中的每个元素的时候,判断元素是否是对象,如果是对象我们在对改对象元素进行循环。 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>如何使用for循环和if语句处理对象中嵌套对象</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <ul> <!--v表示对象每个元素的键值,也就是对象里面冒号:后面的内容--> <!--k表示对象每个元素的键名,也就是对象里面冒号:前面的内容--> <!--i表示对象每个元素的的索引,从0开始--> <!--(v,k,i)这里的顺序是不变的,先是键值然后是键名称最后是索引,变量名可以自己定义--> <!--外层循环开始--> <li v-for="(v,k,i) in duixiang01"> <!--判断键值是否是对象--> <!--如果不是对象直接显示--> <p v-if="typeof v !='object'">{{v}}</p><!--不是对象,直接显示键值--> <!--else后面代码块表示是对象--> <p v-else>{{k}}</p> <!--是对象,不显示键值而显示键名--> <!--如果键值是对象,则循环显示其对象的内容--> <ul v-if="typeof v=='object'"> <!--循环显示对象-内层循环--> <li v-for="(v1,k1,i1) in v"> {{v1}} </li> </ul> </li> </ul> </div> <script> new Vue({ el: '#app', data: { //自定义一个对象,对象名:duixiang01 duixiang01:{ xingming:"黄菊华老师",//对象内的元素,键值对"key:value"的形式存在 quyu:"浙江杭州",//对象内的元素,键值对"key:value"的形式存在 kecheng:{k1:"Vue入门课",k2:"Vue商城实战课"} //嵌套的对象 } } }) </script> </body> </html> 效果图 |
|
上一篇: v-for 循环指令 对象数组的内容显示 | 下一篇: Vue.js 样式绑定 |