动态访问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>