How to bind functions in vuejs

How to bind functions in vuejs: 1. Use the form of "" to bind; 2. Use "" to bind.

The operating environment of this tutorial: windows7 system, vue version 2.9.6, DELL G3 computer.

Event binding in vuejs is done using <v-on: event name = function name>, where the function name is defined in the methods object in the Vue instance Yes, the Vue instance can directly access the methods.

Event binding method

(1) Write js directly inline Call the method

 <button v-on:click="alert（&#39;hi&#39;）">执行方法的第一种写法</button>

on the label (2) Call the method defined in methods

      <button v-on:click="run()">执行方法的第一种写法</button>
      <button @click="run()">执行方法的 简写 写法</button>

    export default {     
      data () { 
        return {
          msg: '你好vue',
          list:[]      
        }
      },
      methods:{
           run:function(){
              alert('这是一个方法');
             }
           }
 }

method passing parameters , the method is directly passed in the method when calling Parameters

      <button @click="deleteData(&#39;111&#39;)">执行方法传值111</button>

      <button @click="deleteData(&#39;222&#39;)">执行方法传值2222</button>

        deleteData(val){
            alert(val);
        },

Incoming event object

      <button data-aid=&#39;123&#39; @click="eventFn($event)">事件对象</button>

        eventFn(e){
          console.log(e);
          // e.srcElement  dom节点
          e.srcElement.style.background='red';
          console.log(e.srcElement.dataset.aid);  /*获取自定义属性的值*/
        }

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to bind functions in vuejs. For more information, please follow other related articles on the PHP Chinese website!