VueJS：使用字符串设置变量名称

Question

myvar是否可以在下面的示例中使用字符串设置变量？

<script>
export default {
    data() {
        return {
            myvar: 'foo'
        };
    }
}
</script>

我尝试了这个但不起作用：

eval('myvar'): 'foo'

Answer 1

这是一个非常粗略且基本的示例，说明如何完成类似的事情：

new Vue({
  el: "#app",
  data() {
    return {
      myVar: 'hello'
    }
  },
  methods: {
    changeVal(varName, newValue) {
      this[varName] = newValue;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{myVar}}
  <button @click="changeVal('myVar', 'world')">change myVar</button>
</div>

在这里，我们使用一个方法，该方法获取变量的名称和要更改的值 - 然后将其传递给当前的 vue 模型实例（由this方法内部表示）以修改动态变量名称的值。