Vue js

by Gowtham Reddy

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>
      Vue.js Application
    </title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <body>
   
   <div id="app">
       <button v-on:click="counter++">Increase</button>
        <button v-on:click="counter--">Decrease</button>
                <button v-on:click="secondCounter++">Second Counter</button>
         <p>counter {{counter}}</p>
          <p>Counter{{output}}</p>
          <p>Result : {{result()}}</p>
          <p>Second Counter : {{secondCounter}}</p>
   </div>
 
  </body>
</html>

JavaScript

new Vue({
	el : '#app',
  data: {
	
    counter: 0,
    secondCounter: 0
	},
  computed : {
			output: function(){
      console.log('Counter');
				return this.counter > 5 ? 'Counter > 5 ' : 'Counter < 5';
			}
	},
  watch: {
  	counter(value){
    		let vm = this;
				setTimeout(function(){
				vm.counter = 0;
			}, 2000)
		}
  	
  },
  methods: {
			result(){
      console.log('Method');
				return this.counter > 5 ? 'Counter > 5' : 'Counter < 5';
		}
  
	}
})