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

Answer 2

你的例子数组更有效。您还可以使用 Array v-for、Filter 和 Find 方法。也可以在数组中搜索或更改名称，拆分或拼接。

<div id="app">
  {{ names[number-1] }} <!-- Result =name2. if you need name 2 array index = 1    -->
</div>

new Vue({
  el: "#app",
  data() {
    return {
      number: 2,
      names: ['name1','name2','name3'],
      }
    }
  }
});

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

Dynamically access Vue component data variable names

javascript

vue.js

vue-component

vuejs2