位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > v-for 循环指令和if语句处理对象中嵌套对象
阅读(22555525)      收藏       赞(5685)      分享
上一篇: v-for 循环指令 对象数组的内容显示 下一篇: Vue.js 样式绑定

我们在下面示例

小白教程网www.2d5.net

中定义了一个包含对象的对象(对象嵌套),我们在循环显示对象中的每个元素的时候,判断元素是否是对象,如果是对象我们在对改对象元素进行循环。

代码
<!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>
效果图

小白教程网www.2d5.net

image.png

上一篇: v-for 循环指令 对象数组的内容显示 下一篇: Vue.js 样式绑定
毕业设计网             广告联系QQ:45157718(微信同号)