Question

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

2021-10-21

1149

javascript vue.js

希望你们都做得很好。我想知道有什么方法可以将字符串转换为变量名？我想将 “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>