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>

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

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