All Together Now

VueJS

by itsazzad

HTML

<script src="https://npmcdn.com/[email protected]/dist/vue.js"></script>
<div id="app">
<p>{{message}}</p>
  <input v-model="message" v-on:keyup.enter="add2List" >
  <ul>
  <li v-for="todo in todos">{{todo.text}}<button v-on:click="remove($index)">X</button></li>
  </ul>
  <button v-on:click="doAction">Do</button>
</div>

JavaScript

new Vue({
	el: "#app",
  data:{
  	message: "Cox's Bazar",
    todos: [
    	{text: 'Anik'},
    	{text: 'Shaon'},
    	{text: 'Sazzad'},
    ]
  },
  methods: {
  	doAction: function(){
    	this.message=this.message.split('').reverse().join(' ');
    },
    add2List: function(){
    	this.todos.push({text: this.message});
      this.message='';
    },
    remove: function(index){
    	this.todos.splice(index, 1);
    }
  }
});