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

Question

这是我当前的模板：

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

Answer 1

I found a very simple (almost magical) way to achieve that, All it does is define an inline (local) variable with the value you want to use multiple times:

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

Note : set is not a special prop in Vuejs, it's just used as a placeholder for our variable definition.

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

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

Answer 2

今天我需要这个并使用<template>标签，v-for像这样
我拿了这个代码并

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

改成了这个

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

它成功了，我感到惊喜，因为我不知道这是可能的

Answer 3

刚刚使用 vue3 进行了测试并且有效，我认为它普遍适用

{{ (somevariable = 'asdf', null) }}
<span v-if="somevariable=='asdf'">Yey</span>
<span v-else>Ney</span>

设置变量时它不会输出任何内容。

强制的：

打开“（”

设置你的变量

关闭“，空）”

Answer 4

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

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

Answer 5

根据模板判断，最好使用计算属性，如公认的答案所示。

但是，由于问题标题范围更大（在Google上，“ Vue模板中的变量”排名很高），我将尝试提供一个更通用的答案。

尤其是如果您不需要转换数组的每一项，那么计算属性可能会很浪费。子组件也可能会过大，特别是如果子组件很小的话（这将使其成为20％的模板，20％的逻辑和60％的props定义样板）。

我喜欢使用的一种非常简单的方法是一个小的帮助程序组件（我们称之为<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文章中阅读上述方法。

Answer 6

这个怎么样：

<div id="app">
  <div
    v-for="( id, index, user=getUser(id) ) in users"
    :key="id"
  >
    {{ user.name }}, {{ user.age }} years old
    <span @click="show(user)">| Click to Show {{user.name}} |</span>
  </div>
</div>

代码笔：https://codepen.io/Vladimir-Miloevi/pen/xxJZKKx

Answer 7

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>