Home > Web Front-end > Vue.js > How to bind events in vue.js

How to bind events in vue.js

coldplay.xixi
Release: 2020-11-13 14:48:00
Original
3642 people have browsed it

How to bind events in vue.js: 1. Write the js method directly in the tag, the code is []; 2. The method of calling method.

How to bind events in vue.js

【Recommended related articles: vue.js

vue.js binding Methods for defining events:

1. Write js methods directly in tags

 <button v-on:click="alert(&#39;hi&#39;)">执行方法的第一种写法</button>
Copy after login

2. Methods for calling methods

<button v-on:click="run()">执行方法的第一种写法</button>
<button @click="run()">执行方法的 简写 写法</button>
export default {     
      data () { 
        return {
          msg: &#39;你好vue&#39;,
          list:[]      
        }
      },
      methods:{
           run:function(){
              alert(&#39;这是一个方法&#39;);
             }
           }
 }
Copy after login

(1) Method passing parameters, the method directly passes the parameters in the method when calling

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

(2) Passing in the event object

<button data-aid=&#39;123&#39; @click="eventFn($event)">事件对象</button>
Copy after login
eventFn(e){
          console.log(e);
          // e.srcElement  dom节点
          e.srcElement.style.background=&#39;red&#39;;
          console.log(e.srcElement.dataset.aid);  /*获取自定义属性的值*/
        }
Copy after login

Related free learning Recommended: JavaScript(Video)

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template