Javascript 在网格中如何显示数据？

在Vuejs中切换8项列表视图和12项网格视图时，如何显示数据？ 我的工作代码笔链接

var demo=新的Vue({
el:“#main”，
数据：{
//在布局模式下，可能的值为“网格”或“列表”。
布局：“网格”，
文章：[{
“标题”：“关于CSS变量您需要了解的内容”，
“url”：”http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",
“图像”：{
“大”：http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables.jpg",
“小”：http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-150x150.jpg"
}
},
{
“标题”：“免费赠品：4个好看的定价表”，
“url”：”http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",
“图像”：{
“大”：http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables.jpg",
“小”：http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-150x150.jpg"
}
},
{
“标题”：“2016年2月20个有趣的JavaScript和CSS库”，
“url”：”http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",
“图像”：{
“大”：http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february.jpg",
“小”：http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february-150x150.jpg"
}
},
{
“标题”：“快速提示：制作响应标题的最简单方法”，
“url”：”http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",
“图像”：{
“大”：http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers.png",
“小”：http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers-150x150.png"
}
},
{
“标题”：“20分钟内学习SQL”，
“url”：”http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",
“图像”：{
“大”：http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes.png",
“小”：http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes-150x150.png"
}
},
{
“标题”：“使用HTML、JS和Electron创建您的第一个桌面应用程序”，
“url”：”http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",
“图像”：{
“大”：http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron.png",
“小”：http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron-150x150.png"
}
}]
}
});





{{a.title}}


您可以为此使用计算属性，例如，
filteredArticles
，它将返回8或12个条目，具体取决于所选布局，使用：

然后，只需在您的
v-for
绑定中使用
filteredarticle
而不是
articles
。
我在这里更新了您的代码笔：

如前一个答案所述，您可以使用计算出的布局更改：

tableSize() {
    return this.layout === "grid" ?  8 : 10
 }

然后，您不必在
项上循环，而是根据另一个计算出的：

rows() {
    return this.items.slice(0, this.tableSize)
 },

在模板中：

  <ul v-if="layout == 'grid'" class="grid">
    <!-- A view with big photos and no text -->
    <p v-for="(row, i) in rows" :index="i">{{row}}</p>
  </ul>



{{row}

上面尝试过，但不起作用，如果可能，请编辑codepen好吗
  <ul v-if="layout == 'grid'" class="grid">
    <!-- A view with big photos and no text -->
    <p v-for="(row, i) in rows" :index="i">{{row}}</p>
  </ul>