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表示）以修改值动态变量名称的名称。

Answer 2

要更改数据，只需像对其他任何可变变量一样进行修改即可。这取决于您的组件的设置方式。查看文档（https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties）的一种方法是这样的（上面链接的修改示例）：

const vue = new Vue({
  el: '#app',
  data: {
    myvar: 'foo'
  },
  template: '<div>{{ myvar }}</div>'
})

vue.myvar = 'bar'

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

如果您想从方法中进行操作（例如，从模板中调用方法），请使用this关键字进行引用：

const vue = new Vue({
  el: '#app',
  data: {
    myvar: 'foo'
  },
  template: '<div><div>{{ myvar }}</div><button @click="changeMe">Click Me</button></div>',
  methods: {
    changeMe() {
      this.myvar = 'bar'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

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

2 个答案: