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>

这似乎是子组件的完美用例。您只需将复杂的计算值作为属性传递给组件。

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

从您的模板判断，您可能最好使用计算属性，就像接受的答案中所建议的那样。

但是，由于问题标题的范围更广(在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]]" v-slot="{ rowLen }">
  <a-droppable :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文档 上的作用域插槽的内容，或者了解我就这个主题编写的 dev.to文章 中的上述方法。

附录: Vue 3

Vue 3对插槽的方法略有不同。首先，需要对 <Pass> 组件源代码进行如下调整：

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

我找到了一种非常简单(几乎神奇的)方法来实现这一点，它所做的就是定义一个内联(本地)变量，并使用您想要多次使用的值：

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

注意： set 不是 Vuejs 中的特殊支柱，它只是用作变量定义的占位符。

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

CodePen ： https://codepen.io/mmghv/pen/dBqGjM

更新:基于@vir us 的评论

这不适用于事件，例如， @click="showUser(user)" 将不会传递正确的用户，而是始终是最后一个评估用户，这是因为 user 临时变量将在循环的每个循环中得到重用和替换。

因此，这个解决方案只适合于模板渲染，因为如果组件需要重新呈现，它将重新评估变量。

但是 如果您确实需要在事件中使用它(尽管不可取)，您需要定义一个外部数组来同时保存多个变量：

<ul :set="tmpUsers = []">
  <li v-for="(id, i) in users" :key="id" :set="tmpUsers[i] = getUser(id)" @click="showUser(tmpUsers[i])">
    <img :src="tmpUsers[i].avatar" />
    {{ tmpUsers[i].name }}
    {{ tmpUsers[i].homepage }}
</ul>

https://codepen.io/mmghv/pen/zYvbPKv

信用： @vir us

虽然在这里基本上复制 users 数组是没有意义的，但在其他需要调用昂贵函数来获取数据的情况下，这是很方便的，但我认为最好使用 computed 属性来构建数组。

今天我需要这个，我使用了 <template> 标记和 v-for ，就像这样

我拿了这个密码

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

把它改成这个

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

它起了作用，我很惊讶，因为我不知道这是可能的