快捷導(dǎo)航

vue的事件綁定與方法詳解

更新時間：2017年08月16日 09:33:46 作者：ghostwu

這篇文章主要為大家詳細介紹了vue的事件綁定與方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

二、綁定雙擊事件，通過在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="點我" v-on:dblclick="change();"/>
    <ul id="box">
      <li v-for="value in arr">{{value}}</li>
    </ul>

上述例子，通過在按鈕中綁定雙擊事件，當事件觸發(fā)時，調(diào)用change方法，通過this.arr 訪問data中定義的數(shù)組arr, 向arr中push值40，那么data中的arr數(shù)據(jù)就被修改了，基于vue是MVVM驅(qū)動方式，那么arr的修改就會實時更新到視圖中.結(jié)果就是在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>

輸出結(jié)果：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: