Html 在Vue模板中，第一行有三个div，第二行有四个div

我创建了一个学习音乐笔记的应用程序
实例：
代码：

我想重构显示笔记。前三个音符在第一行，最后四个音符在第二行。我正在使用flex来实现这一点。

重构前的代码

<template>
<div class="notes">
    <div class="row">
        <button :disabled="disabled" class="note-btn" v-for="note in notes.slice(0,3)" :key="note"
                v-on:click="checkNote($event, note)">{{note}}
        </button>
    </div>

    <div class="row">
        <button :disabled="disabled" class="note-btn" v-for="note in notes.slice(3,notes.length)" :key="note"
                v-on:click="checkNote($event, note)">{{note}}
        </button>
    </div>
</div>
</template>

<style scoped>
.row {
    display: flex;
    justify-content: space-between;
}
</style>

{{note}}
{{note}}
.行{
显示器：flex；
证明内容：之间的空间；
}

之后。我试过这样的东西。因为索引从1开始，所以每次都递减。你怎么认为？有没有更有效的方法来做这类事情

<template>
<div class="notes">
    <div class="row" v-for="i in 2" :key="i">
        <button class="note-btn note-btn-default"
                v-for="note in notes.slice((i-1)*3, Math.floor(notes.length / (2-(i-1))))" :key="note"
                v-on:click="checkNote($event, note)">{{note}}
        </button>
    </div>
</div>
</template>

<style scoped>
.row {
    display: flex;
    justify-content: space-between;
}
</style>

{{note}}
.行{
显示器：flex；
证明内容：之间的空间；
}

如果您想要重构，我认为您可以将行写入这样的组件中

   <template>
    <div>
       <button class="note-btn note-btn-default" v-for="note in notes" >{{note}}</button> 
    </div>
    </template>   

     <script>
        export default{
         props:['notes']
      }
    </script>

{{note}}
导出默认值{
道具：['notes']
}

然后在html中像这样使用该组件

<note-btn :notes="notes"></note-btn>

尝试使用CSS网格作为行的显示，然后使用

网格行开始

根据注释索引使用类绑定将项目放置在其行中

：class=“

${index通过CSS&

flex

，您可以使用

对齐内容

，在第二个按键注释按钮上增加或设置一个更大的

边距

，并将按键包装起来

创意演示：

正文{
保证金：0；
}
文章{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
div{
框大小：边框框；
边框：实心；
填充：1em；
利润率：1em 1vw 0；
宽度：20%；
}
分区：第n个孩子（2）{
利润率：1米10%0；
}
/*演示目的*/
div{
文本对齐：居中；
}
分区：第n个孩子（1）{
计数器复位：div2；
}
div{
反增量：div；
}
分区：第n名儿童（6）{
计数器复位：div；
}
div：：之前{
内容：计数器（div，“.”，上α）；
}

---

在考虑代码质量时，有几个标准在起作用，根据代码的预期目的，它们的重要性可能会有所不同：

• 结果的可预测性
• 可靠性（软件无故障运行的概率）
• 可维护性（软件维护的容易程度：大小、一致性、结构和复杂性）
• 可读性（对于其他开发人员来说，理解代码的功能有多容易+样式和linting规则的一致性）-这通常通过开发人员在准确预测结果的同时修改现有代码的信心来衡量
• 可移植性（软件在不同环境中的可用性）
• 可重用性（在不同的场景/环境/产品中重用此代码有多容易）
• 可伸缩性（在更大/更复杂的系统中重用此软件有多容易-通常与模块化联系在一起）
• 模块化（代码包含/排除功能位或从更大系统中包含/排除功能位的能力）
• 可测试性（软件支持测试工作的程度，包括自动化）
• 浏览器兼容性

正如您所看到的，许多度量彼此重叠，并且大多数在同一点上收敛

虽然在现代团队中，模块性和可测试性通常被视为高阶值，但程序员的代码质量很少被实际测试，而且只有当他们被考虑在公司任职时才会发生。有趣的是，在这样的评审中，代码可读性通常是最高的优点，因为它使代码评审更容易

就您的特定代码片段而言，这里唯一真正的问题是是否将所有按钮都作为同一父级的子级，还是将它们分为两个父级行。考虑到它们彼此的位置（您希望它们在所有响应间隔上都处于相同的位置）理想的结果应该是在父母双方之间进行分割。
这种选择的另一个理由是，为了在它们是同一个父对象的子对象时按需显示它们，必须将显示逻辑从JavaScript移到CSS中，而且由于JavaScript中的开发人员比CSS中的开发人员多，因此最好使用JavaScript中的逻辑

综上所述，下面是一个如何编写上述代码片段的示例，以通过知名编码公司最严格的代码审查：

Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据：（）=>({
注：['A'，'B'，'C'，'D'，'E'，'F'，'G']
}),
计算：{
noteRows（）{
返回[
[2, 3, 4],
[5, 6, 0, 1]
].map（row=>row.map（i=>this.notes[i]））
}
},
方法：{
支票{
控制台日志（注）；
}
}
})

.row{
显示器：flex；
证明内容：之间的空间；
}
/*按钮样式，不是解决方案的一部分*/
.行按钮{
背景色：白色；
边框：1px实心#CCC；
填充：.75em；
边缘：.75em；
最小宽度：16.67%；
边界半径：.25em；
光标：指针
}
.行按钮：悬停{
边框颜色：#888；
}

---

我投票结束这个问题，因为它属于