javascript - 动态访问 Vue 组件数据变量名

Question

编辑:我在这个例子中使用了一个数字，这是一个坏主意，在实际程序中我不是使用数字而是名称(例如 name_abba、name_jef、name_john)
我的 Vue 组件中有 4 个变量:

name_1
name_2
name_3
number

打印值是这样完成的:

{{ name_1 }}

如何根据变量 number 的值更改变量后面的数字?
或者有没有更好的方法来做这样的事情？

{{ name_{{number}} }}

Answer 1

使用 $data选项:

new Vue({
  el: "#app",
  data() {
    return {
      name_abba: 'aaa',
      name_jef: 'bbb',
      name_john: 'ccc',
      current: 'john'
    }
  }
});

<div id="app">
  {{ $data[`name_${current}`] }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>

最好将变量放在对象中而不是根中，这样您就不必使用 $data :

new Vue({
  el: "#app",
  data() {
    return {
      current: 'john',
      name: {
        abba: 'aaa',
        jef: 'bbb',
        john: 'ccc',
      }
    }
  }
});

<div id="app">
  {{ name[current] }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>