vue v-for遍历生成菜单、导航栏时添加分割线/横线

最新推荐文章于 2024-04-16 10:06:53 发布

白～狼

最新推荐文章于 2024-04-16 10:06:53 发布

阅读量3.2k

点赞数 3

文章标签： js vue

本文链接：https://blog.csdn.net/qq_42440043/article/details/121542269

版权

vue v-for 遍历导航、菜单中间添加分割线的解决方法
解决思路：在遍历的div中添加一个横线div，通过v-if（可辅以index）判断该横线是否显示。

<style>
	/* 选项卡片样式 */
  .button {
    width: 200px;
    height: 50px;
    text-align: center;
    background-color: rgb(130, 183, 230);
    margin: 10px;
  }
  .button:hover {
    box-shadow: 0 0 5px rgb(138, 133, 133);
    position: relative;
    top: -3px;
  }
  /** 横线样式*/
  .bottomLine {
    width: 200px;
    border: 1px solid black;
    margin: 20px 10px;
  }
</style>
<body>
  <div id="app">
    <div v-for="(item, index) in button" :key="item.id">
      <div class="button">
        <span>{{item.name}}</span>
      </div>
      <div v-if="item.id == 3" class="bottomLine"></div>
    </div>
  </div>

  <script>
    const vue = new Vue({
      el: "#app",
      data() {
        return {
          button: [
            {
              id : 1,
              name: "first"  
            },
            {
              id : 2,
              name: "second"  
            },
            {
              id : 3,
              name: "third"  
            },
            {
              id : 4,
              name: "fourth"  
            },
          ]
        }
      },
      methods: {
      }
    })
  </script>
</body>

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

白～狼

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue v-for遍历生成菜单、导航栏时添加分割线/横线

vue v-for 遍历导航、菜单中间添加分割线的解决方法解决思路：在遍历的div中添加一个横线div，通过v-if（可辅以index）判断该横线是否显示。<style> /* 选项卡片样式 */ .button { width: 200px; height: 50px; text-align: center; background-color: rgb(130, 183, 230); margin: 10px; } .button:ho
复制链接

扫一扫

vue v-for遍历生成菜单、导航栏时添加分割线/横线

“相关推荐”对你有帮助么？