• 内联处理器中的方法

    内联处理器中的方法

    除了直接绑定到一个方法,也可以在内联 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. }