vue中怎么實現事件綁定

本篇文章為大家展示了vue中怎么實現事件綁定，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一、在vue中，綁定事件，用v-on:事件類型， 如綁定一個點擊事件， 我們可以這樣子做

window.onload = function () {
     var c = new Vue({
       el : 'body',
       methods : {
        say : function(){
          alert( '歡迎學習vue' );
        }
       }
     });
    }

<input type="button" value="點我" v-on:click="say();"/>

添加方法，需要在vue實例的對象參數中，添加一項methods配置， methods是字面量方式，如上例，我們添加了一個say方法, 在按鈕中綁定了一個點擊事件，當事件觸發的時候，執行say();

二、綁定雙擊事件，通過在methods方法中定義的函數，操作data中的數據

window.onload = function () {
     var c = new Vue({
       el : 'body',
       data : {
         arr : [ 10, 20, 30 ]
       },
       methods : {
        change : function(){
          this.arr.push( 40 );
        }
       }
     });
    }

    <input type="button" value="點我" v-on:dblclick="change();"/>
    <ul id="box">
      <li v-for="value in arr">{{value}}</li>
    </ul>

上述例子，通過在按鈕中綁定雙擊事件，當事件觸發時，調用change方法， 通過this.arr 訪問data中定義的數組arr, 向arr中push值40，那么data中的arr數據就被修改了，基于vue是MVVM驅動方式， 那么arr的修改 就會 實時更新到視圖中.結果就是在ul下面新增一項li,值為40

三、指令:v-show，值為false/true.  當為false時，該元素隱藏，當為true時，該元素顯示.

<style>
    div {
      width: 200px;
      height: 200px;
      background: red;
      float:left;
      margin:20px;
    }
  </style>
  <script src="../js/vue.js"></script>
  <script>
    window.onload = function () {
     var c = new Vue({
       el : 'body',
       
     });
    }
  </script>

 <div v-show="true"></div>
 <div v-show="true"></div>
 <div v-show="false"></div>

輸出結果：

<div></div>
<div></div>
<div ></div>

四、點擊按鈕，實現div顯示與隱藏

<style>
    div {
      width: 200px;
      height: 200px;
      background: red;
    }
  </style>
  <script src="../js/vue.js"></script>
  <script>
    window.onload = function () {
      var c = new Vue({
        el: 'body',
        data: {
          flag: false
        },
        methods : {
          toggle : function(){
            this.flag = !this.flag;
          }
        }
      });
    }

<input type="button" value="點我" v-on:click="toggle();"/>
<div v-show="flag"></div>

上述內容就是vue中怎么實現事件綁定，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。