Vue Simple Example

by Ryan Allison

HTML

<div id="vue">

  <input type="text" v-model="output">
  <br><br>
  <span>{{output}}</span>
  <hr>
  <a href="javascript:void(0);" v-on:click="reverseText">Reverse Text</a>

</div>

JavaScript

var elem = document.getElementById("vue");
new Vue({
  el: elem,
  data: {
    output: ""
  },
  watch: {
  	output: function() {
    
    }
  },
  mounted: function() {
  	this.Loaddata();
  },
  methods: {
    reverseText: function() {
      var tempOutput = "";
      var tempArray = this.output.split("");
      for (i = 0; i < tempArray.length; i++) {
        tempOutput += tempArray[tempArray.length - i - 1]
      }
      this.output = tempOutput;
    }
  }
});