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

213

silvestris：

这是我当前的模板：

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

罗伊（Roy J）：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。