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>