事件处理方法

然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

示例:

  1. <div id="example-2">
  2. <!-- `greet` 是在下面定义的方法名 -->
  3. <button v-on:click="greet">Greet</button>
  4. </div>
  1. var example2 = new Vue({
  2. el: '#example-2',
  3. data: {
  4. name: 'Vue.js'
  5. },
  6. // 在 `methods` 对象中定义方法
  7. methods: {
  8. greet: function (event) {
  9. // `this` 在方法里指向当前 Vue 实例
  10. alert('Hello ' + this.name + '!')
  11. // `event` 是原生 DOM 事件
  12. if (event) {
  13. alert(event.target.tagName)
  14. }
  15. }
  16. }
  17. })
  18. // 也可以用 JavaScript 直接调用方法
  19. example2.greet() // => 'Hello Vue.js!'

结果:

事件处理方法 - 图1