如何在Vue JS中将字符串转换为变量名

Question

祝大家一切顺利。我想知道是否有办法将字符串转换为变量名?我想将"minXLabel"转换为minXLabel，并在span标签中使用它，如<span>{{minXLabel}</span>我有

<div class="placeholder-value">
<span>{{  inputsArray[index].firstOption || placeholder[index].first}} - </span> 
<span>{{  inputsArray[index].secondOption || placeholder[index].second}}</span> 
</div>

，输入数组为

inputsArray : [
{ 'firstOption': "minXLabel", 'secondOption': "maxXLabel" },
{ 'firstOption': "minXLabel", 'secondOption': "minYLabel" },
{ 'firstOption': "maxYLabel", 'secondOption': "maxXLabel" },
{ 'firstOption': "maxYLabel", 'secondOption': "minYLabel" }
],

我可以用<span>{{ minXLabel || placeholder[index].first}} - </span>手动完成，但因为我想用不同的键在循环中输出，我需要将该字符串转换为变量名。

Answer 1

可以使用eval函数将字符串转换为变量，如下所示

const inputsArray = [
{ 'firstOption': "minXLabel", 'secondOption': "maxXLabel" },
{ 'firstOption': "minXLabel", 'secondOption': "minYLabel" },
{ 'firstOption': "maxYLabel", 'secondOption': "maxXLabel" },
{ 'firstOption': "maxYLabel", 'secondOption': "minYLabel" }
]
const iterator = inputsArray.values()
for (let item of iterator) {
const variableName = eval(item.firstOption);
console.log(variableName)
}

然而，这些变量不会被声明，如果你想，你可以赋值，例如inputsArray[index].firstOption || placeholder[index].first，然后使用变量

但是，尝试将已有的值赋给一个新变量看起来有点多余。对我来说，你的第一种方法是正确的只是循环你的数组并渲染那里的信息

<div v-for="item in placeholder">
<div v-for="input in inputsArray" class="placeholder-value">
<span>{{  input.firstOption || item.first}} - </span> 
<span>{{  input.secondOption || item.second}}</span> 
</div>
</div>