Item...">
Item..."/>
Item...">
Item...">

vuejs v-用于每5项添加引导行

JavaScript

乐理查德

2020-03-12

我有一系列项目，例如“项目1”，“项目2”到“项目25”。我希望渲染后的HTML如下所示：

<div class="row">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
</div>
<div class="row">
   <div>Item 6</div>
   <div>Item 7</div>
   <div>Item 8</div>
   <div>Item 9</div>
   <div>Item 10</div>
</div>

在vue.js中表达此内容的正确方法是什么？ 

 <div class="row">
    <span  v-for="(item, index) in items">
         // do something like this in vue.js style: 
         // if (item % 5 == 0) print "</div><div class='row'>"
         <app-field >{{ item }}</app-field>
    </span>
</div>

第1193篇《vuejs v-用于每5项添加引导行》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
小小Near阳光 2020.03.12

除了上面我认为很好的示例外，我还将计算定义为计算属性和方法，以使代码更具可读性。参见JSFiddle：

 computed:{
    rowCount() {     
       return Math.ceil(this.items.length / this.itemsPerRow);
    }
 },

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android