Vue

by Aakash Chakravarthy

HTML

<div id="app">

<input v-model="item" type=radio name="abcd"  value="1"/>
<input v-model="item" type=radio name="abcd"  value="2"/>
<input v-model="item" type=radio name="abcd"  value="3"/>

<div v-if="item == 2">
has {{item}} items
</div>

<div v-else="item == 3">
adfdsfdsfds
</div>

<button v-on:click="hey">
click me
</button>

<div>
{{abcd}}
</div>

<input type="text" v-model="aakash" name="jack"/>

<input type="text" v-model="qwerty" name="jack"/>
<div>
{{qwerty}}
</div>

<ul>
    <li v-for="item in myitems">
        <span v-bind:style="itemstyle(item)">{{item.name}}</span><input type="text" v-model="item.size" />
    </li>
</ul>


</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
      item: 0,
      aakash: 'Some text',
      qwerty: false,
      myitems: [{
      	color: 'red',
        size: '16',
        name: 'red16'
      }, {
      	color: 'blue',
        size: '18',
        name: 'blue18'
      }]
  },
  computed: {
  		abcd: function(d){
        	return this.aakash + 'qqq';
        }
  },
  watch: {
  		qwerty: function(theval){
        	this.aakash = theval + 'aaaaaaaa'
        }
  },
  methods: {
  		hey: function(){
        	this.item = 2;
        },
        itemstyle: function(i){
        	
        	return 'color:' + i.color + ';font-size: ' + i.size ;
        }
  }
})