components之循环数组列表渲染

循环数组列表渲染;

// 代码演示demo

// 完整demo
<template>
  <div class="test">
    <div>测试</div>
    <button @click="test">测试this.$message.error</button>
    <div>v-for</div>
    <ul>
      <li v-for="item in arr">
        <p v-for="items in item.img1">{{items.imgurl}}</p>  // 循环数组成功
        <p>{{item.img2}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        arr:[
        {'img1': [
          {'imgurl': '循环数组成功'},
          {'order': ''},
          {'info': ''},
          {'radio': ''}
        ]}, {
          'img2':[
            {'imgurl': '1'},
            {'order': '2',},
            {'info': '3'},
            {'radio':'4'}
        ]}
        ]
      }
    },
    methods:{
      test(){
        console.log(this.$message)
      }
    },
    mounted () {
      console.log(this.arr)
    }
  }
</script>

<style>
</style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容