将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的实际内容是硬编码的，我猜这个电话也会被硬编码......

你可以尝试：

<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
  }
})

Answer 2

<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
  }
})