Vue

by rajnandan1

HTML

<div id="app">
<button v-on:click="increase(2, $event)">Clcik me</button>
<button v-on:click="counter--">Clcik me</button>
<button v-on:click="counter2++">Clcik me</button>
<p>{{counter}}</p>
 <p v-on:mousemove="updatecoords">
 Coordinates : {{x}}/{{y}}
   -- <span v-on:mousemove.stop="">DEAD SPOT</span>
 </p>
 <input type="text" v-model="name">
 <p>{{name}}</p>
 <p>{{result()}} | {{result1}}</p>
 <button @click="changeLink">Change Link</button>
 <a :href="link" target="_blank">{{link}}</a>
 <div class="demo " @click="attachRed = !attachRed" :class="{'red':attachRed}">as</div>
 <div class="demo">gf</div>
 <div class="demo">sd</div> 
</div>

CSS

.red{
  color:red;
}.blue{
  color:blue;
}.green{
  color:green;
}

Vue

new Vue({
  el: "#app",
  data: {
    counter: 1,
    counter2: 1,
    x:0,
    y:0,
    name:"",
    link: "http://google.com",
    attachRed:false
  },
  methods: {
  	increase:function(c, event){
    this.counter+=c;
    },
  	updatecoords:function(event){
    	this.x = event.clientX;
    	this.y= event.clientY
    },
    alertMe:function(event){
      alert("raj")
    },
    result:function(){
    	return (this.counter>5?'Greater 5':"less five")+"-"+this.counter
    },
    changeLink:function(){
    	this.link = "http://zooqle.com"
    }
  },
  computed:{
  	result1:function(){
    	return (this.counter>5?'Greater 5':"less five")+"-"+this.counter
    }
  },
  watch:{
  	counter:function(value){
    
    }
  }
})