时间戳

首页 > 解决方案 > vue.js 是否有类似 AngularJS 的 `ng-repeat-start` 的东西

vue.js - vue.js 是否有类似 AngularJS 的 `ng-repeat-start` 的东西

问题描述

解析 vue.js 的文档我看不到任何提示 vue.js 有类似ng-repeat-start/ng-repeat-end

有没有办法存档类似的东西

<table>

  <tr class="weather_warning top" ng-repeat-start="warning in dwd_warnings">
    <td {{warning.valid_from}} → {{warning.valid_to}}</td>
    <td><div style='background:{{warning.color}};'>{{warning.message}}</div></td>
  </tr>

  <tr class="weather_warning bottom" ng-repeat-end>
    <td colspan="2">
      {{warning.description}}<br/>
      <span>Issued on the {{warning.effective}} ({{warning.headline}}). {{warning.ascertain}}</span>
    </td>
  </tr>

</table>

每个警告由 2 个 TR 组成，它们一起出现。一个是迭代中消息的上半部分，另一个是下半部分。一定是这样，因为一些非常奇怪的格式设置，所以没有办法为一个项目使用 2 个 TR。也许在这个例子中有些标签是关闭的，这是因为我必须删除大量的东西才能在这里发布。请注意colspan="2"第二个 TR 的 TD 中的 ，这可能会暗示这里要解决的问题。

标签： vue.js

解决方案

我能想到的最接近的事情是使用 a <template>，例如

<template v-for="item in items">
  <header>
    Header {{ item }}
  </header>
  <div class="body">
    Body {{ item }}
  </div>
  <footer>
    Footer {{ item }}
  </footer>
</template

见https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

...您还可以使用<template>标签v-for来呈现多个元素的块

您的编辑没有任何变化，您只需将两个<tr>元素包装在

<template v-for="warning in dwd_warnings">
  <tr class="weather_warning top">
    <!-- etc -->
  </tr>
  <tr class="weather_warning bottom">
    <!-- etc -->
  </tr>
</template>

推荐阅读