Vue循环输出数组中的数组

简单的讲一下适用

比如有些列表多个用户，会有多个爱好，多个朋友，多个技能等等，Vue可以用简单的几行代码实现嵌套的数组循环输出，帮你简单搞定大量的输出逻辑

直接上例子

题设

有一个数组有俩人名字叫aaa和bbb，他们都有一个属性朋友，aaa的朋友有a1，a2；bbb的朋友有b1，b2；接下来使用Vue实现他们的输出

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
<div id="app">
  <div v-for="(item,index) in haha">
    <div>{{item.name}}</div>
    <div v-for="(item,index) in item.friends">
      <div>{{item.name}}</div>
    </div>
  </div>
  </div>
</body>
  <script>
    new Vue({
      el:'#app',
      data:{
        haha:[
          {'name':'aaa',
           'friends':[
             {'name':'a1'},
             {'name':'a2'}
           ]},
          {'name':'bbb',
           'friends':[
             {'name':'b1'},
             {'name':'b2'}]
          }
        ]
      }
    })
  </script>
</html>

输出显示

代码运行结果
以上事例测试代码及输出来自JS bin

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue