vue v-for循环表格, 每行显示2个元素td

最新推荐文章于 2024-07-15 18:22:30 发布

和世界不一样，那就不一样！

最新推荐文章于 2024-07-15 18:22:30 发布

阅读量3.1k

点赞数 6

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

本文链接：https://blog.csdn.net/weixin_44834981/article/details/126305192

版权

vue-cli 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

看效果
在这里插入图片描述
代码：

<template>
  <div class="wrapper">
    <table class="table">
        <template >
        <tr v-for="(item,index) in list" :key="index" >
            <template v-if="index%2==0">
          <td class="video-row">
            {{item}}
          </td>
          <td v-if="index+1<list.length" class="video-row" >
            {{list[index+1]}}
          </td>
          </template>
        </tr>
      </template>
    </table>

  </div>
</template>
<script>
export default {
  data() {
    return {
    list:['RIPEMD160_Constants', 'CRC32_table', 'SHA1_Constants', 'Big_Numbers4', 'Big_Numbers0', 'SHA512_Constants', 'DES_sbox', 'BASE64_table', 'CRC32b_poly_Constant', 'MD5_Constants', 'BLOWFISH_Constants', 'SHA2_BLAKE2_IVs', 'CRC32_poly_Constant', 'Big_Numbers5', 'Prime_Constants_long']
    }
  },
  },
}
</script>