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

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

https://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]]">
  <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文档中阅读有关作用域插槽的更多信息，或者在我就该主题撰写的dev.to文章中阅读上述方法。

我发现了一种非常简单（几乎神奇）的方法来实现这一目标，它所要做的就是定义一个内联（局部）变量，该变量要使用多次：

<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

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>