vue

by Gopinath Kaliappan

HTML

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

<div id="app">
  <input type="text" v-bind:input="changeList"  />
  <ul>
  {{title}}
      <li  v-for="(item, index) in list" >
      <div   v-on:click="getIndex(index)" v-bind:class="{ 'active': getStatus(index) }" >{{ item.name}}{{index}}{{currentIndex}}{{getStatus(index)}}</div>
      </li>
  </ul>
</div>

CSS

.active {
  background-color: green;
  width: 300px;
  height: 100px;
}

JavaScript

var VApp = new Vue({
	el: '#app',
  data: {
  	itemText: '',
    currentIndex: 0,
  	title: 'My Vue',
    list: [
    	{
      	name: 'Gopi'
      },
      {
      	name: 'Mathan'
      },
      {
      	name: 'Satheesh'
      },
      {
      	name: 'Balaji'
      },
      {
      	name: 'Rajesh'
      }
    ]
  },
  methods: {
   getIndex: function(index){
    			alert(index);
        	this.currenIndex = index;
          this.$set(this.currentIndex,index)
    },
  	changeList: function(e) {
    	this.itemText = e.target.value
    },
    getStatus: function(b) {
        	return this.currentIndex === b;
    }
  }
})