title: How to define a temporary variable in Vue.js template
body: <p>Here is my current template:</p>
  
  <pre><code>&lt;a-droppable v-for="n in curSize" :key="n - 1" :style="{width: `${99.99 / rowLenMap[orderList[n - 1]]}%`, order: orderList[n - 1]}"&gt;
    &lt;a-draggable :class="{thin: rowLenMap[orderList[n - 1]] &gt; 10}"&gt;
      &lt;some-inner-element&gt;{{rowLenMap[orderList[n - 1]]}}&lt;/some-inner-element&gt;
    &lt;/a-draggable&gt;
  &lt;/a-droppable&gt;
  </code></pre>
  
  <p>The problem is that i have to write <code>rowLenMap[orderList[n - 1]]</code> multiple times, and i'm afraid vue.js engine will also calculate it multiple times.</p>
  
  <p>What i want is something like this:</p>
  
  <pre><code>&lt;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]}"&gt;
    &lt;a-draggable :class="{thin: rowLen &gt; 10}"&gt;
      &lt;some-inner-element&gt;{{rowLen}}&lt;/some-inner-element&gt;
    &lt;/a-draggable&gt;
  &lt;/a-droppable&gt;
  </code></pre>
  
  <p>I think it's not difficult to implement technically because it can be clumsily solved by using something like <code>v-for="rowLen in [rowLenMap[orderList[n - 1]]]"</code>. So is there any concise and official solution?</p>