如何在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]]]"之类的东西笨拙地解决。那么，是否有任何简洁和正式的解决办法？
回答 7
Stack Overflow用户
发布于 2017-05-16 12:37:00
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>Stack Overflow用户
发布于 2019-05-22 04:13:26
我找到了一种非常简单(几乎神奇的)方法来实现这一点，它所做的就是定义一个内联(本地)变量，并使用您想要多次使用的值：
<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
更新:基于@vir us的评论
这不适用于事件，例如，@click="showUser(user)"将不会传递正确的用户，而是始终是最后一个评估用户，这是因为user临时变量将在循环的每个循环中得到重用和替换。
因此，这个解决方案只适合于模板渲染，因为如果组件需要重新呈现，它将重新评估变量。
但是如果您确实需要在事件中使用它(尽管不可取)，您需要定义一个外部数组来同时保存多个变量：
<ul :set="tmpUsers = []">
<li v-for="(id, i) in users" :key="id" :set="tmpUsers[i] = getUser(id)" @click="showUser(tmpUsers[i])">
<img :src="tmpUsers[i].avatar" />
{{ tmpUsers[i].name }}
{{ tmpUsers[i].homepage }}
</li>
</ul>https://codepen.io/mmghv/pen/zYvbPKv
信用：@vir us
虽然在这里基本上复制users数组是没有意义的，但在其他需要调用昂贵函数来获取数据的情况下，这是很方便的，但我认为最好使用computed属性来构建数组。
Stack Overflow用户
发布于 2018-12-05 16:15:05
从您的模板判断，您可能最好使用计算属性，就像接受的答案中所建议的那样。
但是，由于问题标题的范围更广(在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]]" v-slot="{ rowLen }">
<a-droppable :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文章中的上述方法。
附录: Vue 3
Vue 3对插槽的方法略有不同。首先，需要对<Pass>组件源代码进行如下调整：
const Pass = {
render() {
return this.$slots.default(this.$attrs)
}
}https://stackoverflow.com/questions/43999618
复制相似问题
腾讯云开发者
