<!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>

在这里插入图片描述

# vue.js
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