vue中怎么實(shí)現(xiàn)事件綁定

本篇文章為大家展示了vue中怎么實(shí)現(xiàn)事件綁定，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

一、在vue中，綁定事件，用v-on:事件類(lèi)型， 如綁定一個(gè)點(diǎn)擊事件， 我們可以這樣子做

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

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

添加方法，需要在vue實(shí)例的對(duì)象參數(shù)中，添加一項(xiàng)methods配置， methods是字面量方式，如上例，我們添加了一個(gè)say方法, 在按鈕中綁定了一個(gè)點(diǎn)擊事件，當(dāng)事件觸發(fā)的時(shí)候，執(zhí)行say();

二、綁定雙擊事件，通過(guò)在methods方法中定義的函數(shù)，操作data中的數(shù)據(jù)

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="點(diǎn)我" v-on:dblclick="change();"/>
    <ul id="box">
      <li v-for="value in arr">{{value}}</li>
    </ul>

上述例子，通過(guò)在按鈕中綁定雙擊事件，當(dāng)事件觸發(fā)時(shí)，調(diào)用change方法， 通過(guò)this.arr 訪(fǎng)問(wèn)data中定義的數(shù)組arr, 向arr中push值40，那么data中的arr數(shù)據(jù)就被修改了，基于vue是MVVM驅(qū)動(dòng)方式， 那么arr的修改 就會(huì) 實(shí)時(shí)更新到視圖中.結(jié)果就是在ul下面新增一項(xiàng)li,值為40

三、指令:v-show，值為false/true.  當(dāng)為false時(shí)，該元素隱藏，當(dāng)為true時(shí)，該元素顯示.

<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>

輸出結(jié)果：

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

四、點(diǎn)擊按鈕，實(shí)現(xiàn)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="點(diǎn)我" v-on:click="toggle();"/>
<div v-show="flag"></div>

上述內(nèi)容就是vue中怎么實(shí)現(xiàn)事件綁定，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。