fix：修复v-if和v-else事件重复绑定的问题

sisxzero · Mar 16, 2017 · 17111b8 · 17111b8
1 parent 020013b
commit 17111b8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/if-else.html b/if-else.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="format-detection" content="telephone=no"/>
+	<meta name="screen-orientation" content="portrait">
+	<meta name="viewport"
+				content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
+	<title>方圆书院</title>
+</head>
+<body>
+<div id="container">
+	<h1>
+		// 修复v-if  v-else重复事件绑定的问题
+	</h1>
+	<div class="right" v-tap="{ methods : sendOrder }" v-if="canBuy"> 确认订购if </div>
+	<div v-else class="right disable">确认订购else</div>
+</div>
+<script src="./vue2.0.js"></script>
+<script src="./vue-tap.js"></script>
+<script>
+  new Vue({
+    el : "#container",
+    data : {
+      canBuy : true,
+    },
+    mounted:function () {
+      // 修复v-if  v-else的问题
+      setTimeout(() => {
+        this.canBuy = false;
+        setTimeout(() => {
+          this.canBuy = true;
+        },2000);
+      },2000);
+
+    },
+    methods : {
+      sendOrder : function () {
+				if(this.canBuy) {
+					console.log('if')
+        } else {
+				  console.log('else');
+				}
+      }
+    }
+  })
+</script>
+</body>
+</html>
diff --git a/vue-tap.js b/vue-tap.js
@@ -123,6 +123,7 @@
 
   var vue2 = {
     bind: function (el, binding) {
+      console.log(binding)
       el.tapObj = {};
       el.handler = function (e,isPc) { //This directive.handler
         var value = binding.value;
@@ -183,6 +184,10 @@
         !isPc ? value.tapObj = el.tapObj : null;
         value.methods.call(this, value);
       };
+    },
+    unbind: function (el) {
+      // 卸载，别说了都是泪
+      el.handler = function () {};
     }
   };