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

这是我当前的模板:

<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]]]"这样的方法来解决问题。那么，有没有任何简洁而正式的解决方案？

最佳答案

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>