How to bind functions in vuejs

How to bind functions in vuejs: 1. Use the form of "c8974164c36732207cf98a31c98d3fec" to bind; 2. Use "1148f69fdd2dd47fd44340482d0db10f" 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 0931c8b825e4621c6a34e987a4a60c7d, 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

      b51a10c915ab1622d4d060f7c652677a执行方法的第一种写法65281c5ac262bf6d81768915a4a77ac0
      7968d758909d474bfaba35fbb18ae31c执行方法的 简写 写法65281c5ac262bf6d81768915a4a77ac0

    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!