Vue 2.0 Hello World

by delcon

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app" >
  <div :class="{'has-value' : hasValue}">
    <input type="text"
      ref="input"
      v-bind:value="value"
      @input="onInput" >
  </div>

</div>

JavaScript

new Vue({
  el: '#app',
  data: function() {
  	return {
      hasValue: false
    }
  },
  props: ['value'],
  
  methods:{
  	onInput: function(){

    	val= this.$refs.input.value
      if(val && val.length > 0){
      	this.hasValue = true
      } else {
      	this.hasValue = false
      }
    }
  }
  
})