Question

这是我目前的模板：

<a-droppable v-for="n in curSize" :key="n - 1" :style="{width: `${99.99 / rowLenMap[orderList[n - 1]]}%`, order: orderList[n - 1]}">
  <a-draggable :class="{thin: rowLenMap[orderList[n - 1]] > 10}">
    <some-inner-element>{{rowLenMap[orderList[n - 1]]}}</some-inner-element>
  </a-draggable>
</a-droppable>

问题是我必须多次写rowLenMap[orderList[n - 1]]，而且我担心vue.js引擎也会多次计算它。

我想要的是这样的：

<a-droppable v-for="n in curSize" :key="n - 1" v-define="rowLenMap[orderList[n - 1]] as rowLen" :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}">
  <a-draggable :class="{thin: rowLen > 10}">
    <some-inner-element>{{rowLen}}</some-inner-element>
  </a-draggable>
</a-droppable>

我认为技术上实施起来并不困难，因为它可以通过使用像v-for="rowLen in [rowLenMap[orderList[n - 1]]]"之类的东西来笨拙地解决。那么有任何简洁和官方的解决方案吗？

Answer 1

根据模板判断，最好采用计算属性，如公认的答案所示。

但是，由于问题标题范围更广（在Google上，“ Vue模板中的变量”排名很高），我将尝试提供一个更通用的答案。

特别是，如果您不需要转换数组的每个项目，那么计算属性可能是一种浪费。子组件也可能会过大，特别是如果子组件很小（会使它成为20％模板，20％逻辑和60％道具定义样板）。

我喜欢使用的一种非常简单的方法是一个小的帮助程序组件（我们将其称为<Pass>）：

const Pass = {
  render() {
    return this.$scopedSlots.default(this.$attrs)
  }
}

现在我们可以这样编写您的组件了：

<Pass v-for="n in curSize" :key="n - 1" :rowLen="rowLenMap[orderList[n - 1]]">
  <a-droppable slot-scope="{ rowLen }" :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}">
    <a-draggable :class="{thin: rowLen > 10}">
      <some-inner-element>{{rowLen}}</some-inner-element>
    </a-draggable>
  </a-droppable>
</Pass>

<Pass>通过创建作用域插槽来工作。阅读有关Vue.js documentation上的作用域槽或我在该主题上撰写的dev.to article中的上述方法的更多信息。

Answer 2

这似乎是子组件的完美用例。您可以简单地将复杂的计算值作为属性传递给组件。

https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Answer 3

今天我需要这个并使用<template>标签和v-for这样的
我把这个代码和

<ul>
  <li v-for="key in keys" 
      v-if="complexComputation(key) && complexComputation(key).isAuthorized">
    {{complexComputation(key).name}}
  </li>
</ul>

改成这个

<ul>
  <template v-for="key in keys">
    <li v-for="complexObject in [complexComputation(key)]"
        v-if="complexObject && complexObject.isAuthorized">
      {{complexObject.name}}
    </li>
  </template>
</ul>

它奏效了，我很惊喜，因为我不知道这是可能的

Answer 4

curSize是一个数组。您的临时值包含相应的隐含数组sizedOrderList = curSize.map(n => orderList[n-1])。如果您将其定义为计算，则HTML将变为

<a-droppable v-for="n, index in sizedOrderList" :key="curSize[index]" :style="{width: `${99.99 / rowLenMap[n]}%`, order: n}">
  <a-draggable :class="{thin: rowLenMap[n] > 10}">
    <some-inner-element>{{rowLenMap[n]}}</some-inner-element>
  </a-draggable>
</a-droppable>

Answer 5

我找到了一种非常简单（几乎神奇）的方法来实现这一目标，它所做的只是定义一个内联（本地）变量，该变量具有您要多次使用的值：

<li v-for="id in users" :key="id" :set="item = getUserData(id)">
    <img :src="item.avatar" />
    {{ item.name }}
    {{ item.homepage }}
</li>

注意：set在VueJS中不是特殊的道具，它只是用作变量定义的占位符。

Source：https://dev.to/pbastowski/comment/7fc9

如何在Vue.js模板中定义临时变量

5 个答案: