将div值绑定到事件处理程序

Question

是否可以绑定div值1或2，将其隐式传递给getValue，而不是下面的手动分配？

<div id="app">
  {{value}}
  <div @click="getValue(1)">1</div>
  <div @click="getValue(2)">2</div>
</div>

new Vue({
  el: 'app',
  data: {
    value: ''
  },
  methods: {
    getValue: (v) => this.value = v
  }
})

Answer 1

<div id="app">
  {{value}}
  <div @click="getValue">1</div>
  <div @click="getValue">2</div>
</div>

new Vue({
  el: 'app',
  data: {
    value: ''
  },
  methods: {
    getValue: (event) => this.value = event.target.textContent
  }
})

Answer 2

如果div的实际内容是硬编码的，我想调用也会被硬编码。。。

你可以试试：

<div id="app">
  {{value}}
  <div v-for="val in values" @click="getValue(val)">{{ val }}</div>
</div>

然后：

new Vue({
  el: 'app',
  data: {
    value: '',
    values: [1, 2]
  },
  methods: {
    getValue: (v) => this.value = v
  }
})