如何切换Vue JS中的内容将字符串传递给数据

Question

我试图有一个简单的切换函数，在香草js中创建需要一分钟的时间，但不知怎么的，我在Vue中被卡住了。我如何解决下面的问题，传递一个字符串，该字符串应该是需要访问的已创建的var。

    <div @click="showData('data1')">click</div>
    <div @click="showData('data2')">click</div>
    <div @click="showData('data3')">click</div>
    <div v-show="data1">Show data 1</div>
    <div v-show="data2">Show data 2</div>
    <div v-show="data3">Show data 3</div>

data() {
    data1 : false,
    data2 : false,
    data3 : false
}


showData(curData) {

    this.data1 = false;
    this.data2 = false;
    this.data3 = false;

    this.[curData] = !this.curData;

}

Answer 1

null

new Vue({
 el: '#app',
 data: function() {
    return {
      data1: false,
      data2: false,
      data3: false
    }
  },
  methods: {
    showData(curData) {
      this.data1 = false;
      this.data2 = false;
      this.data3 = false;

      this[curData] = ! this[curData];
    }
  }
});

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div @click="showData('data1')">click data1</div>
  <div @click="showData('data2')">click data2</div>
  <div @click="showData('data3')">click data3</div>
  <br/>
  <div v-show="data1">Show data 1</div>
  <div v-show="data2">Show data 2</div>
  <div v-show="data3">Show data 3</div>
</div>

Answer 2

应该是this[curData]=！this.curData；

代码演示