jinxuan
9/19/2015 - 11:40 PM

JS Bin // source https://jsbin.com/zuqozelega

JS Bin

// source https://jsbin.com/zuqozelega

jsbin.zuqozelega.js
content_copyfile_download
Vue.component('coupon', {
  template: document.querySelector("#coupon-template"),
  
  data:function(){
    return {
      coupon: 'FOOBAR',
      inValid: false,
      message: ''
    };
  },
  
  methods: {
    whenCouponHasBeenEntered:function(){
      this.validate();
    },
    
    validate: function(){
      if(this.coupon=='FOOBAR') {
        this.message = '20% off';
      }
      else 
        this.message = "Not valid coupon";
    }
  }
  
});

new Vue({
  el: '#demo'
});
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  
  <script id="coupon-template" type="x-template">
    
    <input type="text" v-model="coupon" v-on="blur:whenCouponHasBeenEntered">
    <span class="label label-default" v-text="message"></span>

  </script>
<body id="demo">

  
  <coupon></coupon>


<script id="jsbin-javascript">
Vue.component('coupon', {
  template: document.querySelector("#coupon-template"),
  
  data:function(){
    return {
      coupon: 'FOOBAR',
      inValid: false,
      message: ''
    };
  },
  
  methods: {
    whenCouponHasBeenEntered:function(){
      this.validate();
    },
    
    validate: function(){
      if(this.coupon=='FOOBAR') {
        this.message = '20% off';
      }
      else 
        this.message = "Not valid coupon";
    }
  }
  
});

new Vue({
  el: '#demo'
});
</script>



<script id="jsbin-source-javascript" type="text/javascript">Vue.component('coupon', {
  template: document.querySelector("#coupon-template"),
  
  data:function(){
    return {
      coupon: 'FOOBAR',
      inValid: false,
      message: ''
    };
  },
  
  methods: {
    whenCouponHasBeenEntered:function(){
      this.validate();
    },
    
    validate: function(){
      if(this.coupon=='FOOBAR') {
        this.message = '20% off';
      }
      else 
        this.message = "Not valid coupon";
    }
  }
  
});

new Vue({
  el: '#demo'
});</script></body>
</html>