Question

所以基本上我要做的是获得一个按钮，只显示v-for中的第一个项目。我希望能够添加一个按钮，无论v-for循环转了多少次，它都只能打印一次。

以下是带有代码的JSFiddle以及下面发布的代码

  <div v-for="item in userInformation">
  <p>{{item.username}}</p>
  <p>{{item.email}}</p>
  <p>{{item.age}}</p>
  <button> Only Show Once</button> //Only show this once
  </div>

Answer 1

你可以使用v-once指令在Vuejs中只渲染一次视图，但是你的v-for需要:key绑定到你的循环索引，但仍然没有＃{3}}。为我工作：

另一种快速方法是，使用密钥获取最后一次迭代：

 <div v-for="(item, index) in userInformation" :key='index'>

并将此逻辑放在按钮

中

 <button v-if='index === userInformation.length -1 '> Only Show Once</button>

此jsfiddle demo将仅显示一次按钮，并在最后一次迭代后显示。

Vuejs只需在v-for内打印一次按钮

1 个答案: