内联处理器中的方法

除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

  1. <div id="example-3">
  2. <button v-on:click="say('hi')">Say hi</button>
  3. <button v-on:click="say('what')">Say what</button>
  4. </div>
  1. new Vue({
  2. el: '#example-3',
  3. methods: {
  4. say: function (message) {
  5. alert(message)
  6. }
  7. }
  8. })

结果:

内联处理器中的方法 - 图1

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:

  1. <button v-on:click="warn('Form cannot be submitted yet.', $event)">
  2. Submit
  3. </button>
  1. // ...
  2. methods: {
  3. warn: function (message, event) {
  4. // 现在我们可以访问原生事件对象
  5. if (event) event.preventDefault()
  6. alert(message)
  7. }
  8. }