vue中使用变量

Question

<template>
  <div>
    <ul>
      <li @click="num('a')"/>
      <li @click="num('b')"/>
      <li @click="num('b')"/>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keys: '',
      a: [],
      b: [],
      c: []
    }
  },
  created() {

  },
  mounted() {
    console.log(this.keys)
  },
  methods: {
    num(type) {
      this.keys = type
    }
  }
}
</script>

现在问题是this.keys想代表this.a 或者this.b 如何处理？

Answer 1

方案一：

<template>
  <div>
    <ul>
      <li @click="num(a)"/>
      <li @click="num(b)"/>
      <li @click="num(b)"/>
    </ul>
  </div>
</template>

<script> export default {
  data() {
    return {
      keys: [],
      a: [],
      b: [],
      c: []
    }
  },
  created() {

  },
  mounted() {
    console.log(this.keys)
  },
  methods: {
    num(type) {
      this.keys = type
      console.log(this.keys)
    }
  }
} </script>

方案二：

<template>
  <div>
    <ul>
      <li @click="num('a')"/>
      <li @click="num('b')"/>
      <li @click="num('b')"/>
    </ul>
  </div>
</template>

<script> export default {
  data() {
    return {
      keys: [],
      a: [],
      b: [],
      c: []
    }
  },
  created() {

  },
  mounted() {
    console.log(this.keys)
  },
  methods: {
    num(type) {
      this.keys = this[type]
      console.log(this.keys)
    }
  }
} </script>

Answer 2

computed一个keys变量可以呀，不用再data里面定义

computed: {
    keys() {
        return this.a; // 获取this.a
        // return this.b; // 获取this.b
        // return { a: this.a, b: this.b }; // 同时获取ab
    }
}