Vuejs2 是否可以将组件属性用作数据变量？

我已将当前代码复制到下面。我正试图根据我作为道具传递给我的

表格
组件的
类型
动态生成表格标题（在我的示例中，表格和状态是作为数据数组的）

我通过使用
标题中的
if
语句来返回正确的列表，从而实现了这一点

但是，我不想为每个
类型添加额外的
if
语句

有没有一种方法可以利用
type
prop直接绑定到匹配的数据

<div id="root" class="container">
    <tables type="stats">

    </tables>
</div>

Vue.component('tables', {
  template: `
  <table class="table">
    <thead>
      <tr>
        <th v-for="headers in header">{{ headers }}</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th v-for="footers in header">{{ footers }}</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>1</th>
        <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
        <slot></slot>
      </tr>
    </tbody>
  </table>
  `,

  data () {
    return {
      standings: ['Rank', 'Team', 'Wins', 'Losses'],
      stats: ['Number', 'Player', 'Position', 'RBI', 'HR']
    };
  },

  computed: {
    header() {
      if (this.type == 'standings') {
        return this.standings;
      } else {
        return this.stats;
      }
    }
  },

  props: {
    type: { required: true }
  }

});


Vue.component（'表'{
模板：`
{{headers}}
{{footers}}
1.
（C）
`,
数据（）{
返回{
排名：[‘排名’、‘团队’、‘赢’、‘输’]，
统计数据：['Number'、'Player'、'Position'、'RBI'、'HR']
};
},
计算：{
标题（）{
如果（this.type=='standings'）{
把这张表还给我；
}否则{
返回这个.stats；
}
}
},
道具：{
类型：{required:true}
}
});
如果稍微更改数据结构，可以删除If语句

  data () {
    return {
      types:{
        standings: ['Rank', 'Team', 'Wins', 'Losses'],
        stats: ['Number', 'Player', 'Position', 'RBI', 'HR']
      }
    };
  },
  computed: {
    header() {
      return this.types[this.type]
    }
  },
  props: {
    type: { required: true }
  }

这里有一个例子


Vue.component（'tables'{
模板：`
{{headers}}
{{footers}}
1.
（C）
`,
数据（）{
返回{
类型：{
排名：[‘排名’、‘团队’、‘赢’、‘输’]，
统计数据：['Number'、'Player'、'Position'、'RBI'、'HR']
}
};
},
计算：{
标题（）{
返回this.types[this.type]
}
},
道具：{
类型：{required:true}
}
});
新Vue({
el:“根”
})
如果稍微更改数据结构，可以删除If语句

  data () {
    return {
      types:{
        standings: ['Rank', 'Team', 'Wins', 'Losses'],
        stats: ['Number', 'Player', 'Position', 'RBI', 'HR']
      }
    };
  },
  computed: {
    header() {
      return this.types[this.type]
    }
  },
  props: {
    type: { required: true }
  }

这里有一个例子


Vue.component（'tables'{
模板：`
{{headers}}
{{footers}}
1.
（C）
`,
数据（）{
返回{
类型：{
排名：[‘排名’、‘团队’、‘赢’、‘输’]，
统计数据：['Number'、'Player'、'Position'、'RBI'、'HR']
}
};
},
计算：{
标题（）{
返回this.types[this.type]
}
},
道具：{
类型：{required:true}
}
});
新Vue({
el:“根”
})

很有趣，就在不到5分钟之前，我的想法与您的想法几乎完全相同，但我没有意识到您可以在数据（）部分中限定这样的数组列表。我的看起来更像我贴在下面的东西，但仍然有问题。你的解决方案是完美的。我还在学习JS和Vue，这实际上让我越过了一个路障，非常感谢headerType:[{headerType:'standings'，header:['Rank'，'Team'，'Wins'，'loss']}，{headerType:'stats'，header:['Number'，'Player'，'Position'，'RBI'，'HR']}]`@JimDaily不客气：）它并没有真正限定任何内容，只是将数据属性设置为对象并像字典一样使用。你也可以在你的评论中使用一个数组，它会稍微慢一点。很有趣，就在不到5分钟之前，我的想法和你几乎完全一样，但我不知道你可以在你的data（）部分中限定这样的数组列表。我的看起来更像我贴在下面的东西，但仍然有问题。你的解决方案是完美的。我还在学习JS和Vue，这实际上让我越过了一个路障，非常感谢headerType:[{headerType:'standings'，header:['Rank'，'Team'，'Wins'，'loss']}，{headerType:'stats'，header:['Number'，'Player'，'Position'，'RBI'，'HR']}]`@JimDaily不客气：）它并没有真正限定任何内容，只是将数据属性设置为对象并像字典一样使用。你也可以像在评论中那样使用一个数组，它只会稍微慢一点。