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

白～狼

3462人浏览 · 2021-11-25 17:16:49

白～狼 · 2021-11-25 17:16:49 发布

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>

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

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}$/, //不连续的两位字母// /^