Question

解析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。在此示例中，也许某些标签已关闭，这是因为我必须删除大量内容才能将其发布到此处。请注意第二个TR的TD中的colspan="2"，这可能暗示了此处要解决的问题。

Answer 1

我能想到的最接近的方法是使用<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>

vue.js是否具有AngularJS的ng-repeat-start之类的功能

1 个答案: