Question

是否可以在 VueJS模板中声明临时变量？我的问题是，在v-for中，我检查实际值是否存在于 Array 中，如果不存在，我会打印另一个文本，但是对于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>

Answer 2

不要在模板中执行此操作，您可以先在计算属性中过滤数据，然后在v-中过滤数据以使用该计算属性。根据经验，请始终将模板保持尽可能简单，所有复杂的逻辑都会进入脚本（方法，计算道具或生命周期挂钩）。

Answer 3

我从fabruex的答案中找到了一种方法，但是直接在模板中... 与VueJ无关，它正在执行自执行匿名功能...

检查一下：

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

如何在VueJs的模板中设置临时变量？

3 个答案: