vue二维数组渲染(2次v-for循环)

最新推荐文章于 2024-02-03 18:23:28 发布

金超斌

最新推荐文章于 2024-02-03 18:23:28 发布

阅读量3.5k

点赞数 3

分类专栏： v-for 文章标签： vue.js

本文链接：https://blog.csdn.net/jojodeblog/article/details/107141790

版权

v-for 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      background-color: aqua;
    }
    ul {
      list-style: none;
      display: flex;
    }
    .red {
      background-color: aqua;
    }
    .no {
      visibility: hidden;
    }
    button {
      cursor: pointer;
      width: 60px;
      height: 60px;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul v-for='(item,index) in yuansu'>
      <li v-for='(items,indexs) in item' @click="search(index,indexs)">
        <button :class="items.color">
          <div>{{items.id}}</div>
          <div>{{items.name}}</div>
          <div>{{items.conent}}</div>
        </button>
      </li>
    </ul>
  </div>
  <script src="vue/vue.js"></script>
  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        yuansu:[
          [ 
            {id:'',color:'no'},
            {id:1,color:'row'},
            {id:'',color:'no'},
           ],
          [ {id:1,name:'',color:'row'},
            {id:1,name:'H',conent:'123123',color:'red'},
            {id:'',name:'',color:'no'},
            {id:'',name:'',color:'no'},
            {id:'',name:'',color:'no'},
            {id:15,name:'H',color:'red'},
            {id:16,name:'H',color:'red'}
          ],
          [
            {id:21,name:'H',color:'red'},
            {id:22,name:'H',color:'red'},
            {id:23,name:'H',color:'red'},
            {id:24,name:'H',color:'red'},
            {id:25,name:'H',color:'red'},
            {id:26,name:'H',color:'red'}
          ],
          [
            {id:31,name:'H',color:'red'},
            {id:32,name:'H',color:'red'},
            {id:33,name:'H',color:'red'},
            {id:34,name:'H',color:'red'},
            {id:35,name:'H',color:'red'},
            {id:36,name:'H',color:'red'}
          ]
        ]
        },
      methods:{
        search(index,indexs){
          // console.log(index,indexs)
          //点击按钮获取相应的id
          console.log(this.yuansu[index][indexs].id)
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述