javascript - 如何在VueJs模板中创建临时变量？

Question

有没有办法在VueJS模板中声明临时变量？我的问题是，在 v-for 中，我检查数组中是否存在实际值，如果不存在，我会打印另一个文本，但对于 v-for 的每个元素，它都会执行此操作 两次 (首先检查是否存在，然后打印值)，其中使用变量可以完成一次。

我使用的是 VueJS2，没有任何预处理器或模板引擎。

这是我的数组:

let formats = [
    {id: 1, label: "A3"},
    {id: 1, label: "A4"},
    {id: 1, label: "A5"},
    {id: 1, label: "A6"},
];

这是我的模板:

<tr v-for="data in ajaxDatas">
    <td>
        <template
            v-if="formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            })"
        >
            {{ formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            }).label }}
        </template>
        <template v-else>
            Other format
        </template>
    </td>
</tr>

正如你所看到的它并没有真正优化...我正在考虑以一种方式创建一个临时变量来存储查找返回，如下所示:

<tr v-for="data in ajaxDatas">
    <td>
        {{
            var f = formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            });
            f ? f.label : 'Other format'
        }}
    </td>
</tr>

暂时我找到了一种方法，但它不能正常工作，我可以做这样的事情:

<tr v-for="data in ajaxDatas">
    <td>
        {{ f = formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            }) }}
        {{ f ? f.label : 'Other format' }}
    </td>
</tr>

但这实际上是在 HTML 中打印 f 的结果...所以我将其放入未显示的 html 标签中，但这让我觉得这里还有更好的事情要做...

Answer 1

只需创建一个方法并在模板中使用它:

methods: {

  getFormat(width,height) {

    var f = this.formats.find( e => {

      return (e.shortEdge == height && e.longEdge == width) || (e.shortEdge == width && e.longEdge == height);

    });

    return f ? f.label : 'Other format'

  }

}

<tr v-for="data in ajaxDatas">
  <td>
      {{ getFormat(data.width,data.height) }}
  </td>
</tr>