First of all you can use the short notation @click instead of v-on:click for readability purposes.

Second You can use a click event handler that calls other functions/methods as @Tushar mentioned in his comment above, so you end up with something like this :

<div id="app">
   <div @click="handler('foo','bar')">
       Hi, click me!
   </div>
</div>

<!-- link to vue.js !--> 
<script src="vue.js"></script>

<script>
   (function(){
        var vm = new Vue({
            el:'#app',
            methods:{
                method1:function(arg){
                    console.log('method1: ',arg);
                },
                method2:function(arg){
                    console.log('method2: ',arg);
                },
                handler:function(arg1,arg2){
                    this.method1(arg1);
                    this.method2(arg2);
                }
            }
        })
    }()); 
</script>

If you want something a little bit more readable, you can try this:

<button @click="[click1($event), click2($event)]">
  Multiple
</button>

To me, this solution feels more Vue-like hope you enjoy

updated dec-2021

you need to separate with a comma like this:

<button @click="open(), onConnect()">Connect Wallet</button>

to add an anomymous function to do that may be an alternative:

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div> 

Separate into pieces.

Inline:

<div @click="f1() + f2()"></div> 

OR: Through a composite function:

<div @click="f3()"></div> 

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>

I just want to add one small missing bit here which I felt missing in all of the answers above; that is you actually need to call the method rather than just passing its name as callable, when want to add multiple click handlers.

This might come as a surprise since Vue allows passing a callable to the click handler.

This works

<div><button @click="foo(); bar();">Button1</button></div>
<div><button @click="foo">Button2</button></div>

This does not

<div><button @click="foo; bar;">Button3</button></div>

JsFiddle example

This simple way to do v-on:click="firstFunction(); secondFunction();"

This works for me when you need to open another dialog box by clicking a button inside a dialogue box and also close this one. Pass the values as params with a comma separator.

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>

in Vue 2.5.1 for button works

 <button @click="firstFunction(); secondFunction();">Ok</button>

Based on ES6 with anonymous functions:

<button @click="() => { function1(); function2(); }"></button>

The Vue event handling only allows for single function calls. If you need to do multiple ones you can either do a wrapper that includes both:

<div @click="handler"></div>
////////////////////////////
handler: function() { //Syntax assuming its in the 'methods' option of Vue instance
    fn1('foo');
    fn2('bar');
}

EDIT

Another option is to edit the first handler to have a callback and pass the second in.

<div @click="fn1('foo', fn2)"></div>
////////////////////////////////////
fn1: function(value, callback) {
    console.log(value);
    callback('bar');
},
fn2: function(value) {
    console.log(value);
}

Html:

<div id="example">
  <button v-on:click="multiple">Multiple</button>
</div>

JS:

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    multiple: function (event) {
      this.first()
      this.second()
    }
    first:  function (event) {
      //yourstuff
    }
    second: function (event) {
      //yourstuff
    }
  }
})

vm.multiple()

You can use this:

<div @click="f1(), f2()"></div> 

Simply do like below:

• with $event:

  <div @click="function1($event, param1); function2($event,param1);"></div>
  

• without $event:

  <div @click="function1(param1); function2(param1);"></div>
  

You can do it like

<button v-on:click="Function1(); Function2();"></button>

OR

<button @click="Function1(); Function2();"></button>

I'd add, that you can also use this to call multiple emits or methods or both together by separating with ; semicolon

  @click="method1(); $emit('emit1'); $emit('emit2');"

I was also looking this solution and used different methods and I found this one best for me. Just shared with you ***You can use template literals to use multiple function in one event in vuejs

<div @click="`${firstFunction() ${secondFunction() ${thirdFucntion()}`"></div>

Note:I am using vue3.

You can write javascript as a normal multiline:

@click="(event) => {
          console.log(event);
          console.log("Second log");
        }"

I've found a mix seems to work (Vue 2.6.10)

<button type="button" class="btn btn-default" 
    @click="buttonClicked('Back to Dash');[handlerClose(),$router.push({name:'dash',params:{
    id:id, previous:componentInfo}})]" 
    role="button">Back to Dash {{ dashNumber }}</button>

buttonClicked() logs its argument to console. So semi-colon separated followed by array of functions seems to work. componentInfo is just object that contains name and template name of the previous component (useful for debugging).

you can, however, do something like this :

<div onclick="return function()
              {console.log('yaay, another onclick event!')}()" 
              @click="defaultFunction"></div>

yes, by using native onclick html event.