Vue.js2.0中的变化小结

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <button v-on:click="reverse">点击</button>
 <input v-model="newtodo" v-on:keyup.enter="add">
 <ul>
 <li v-for="(todo,index) in todos">
 <span>{{todo.text}}</span>
 <button v-on:click="remove(index)">删除</button>
 </li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App',
 todos: [
 {text:'我是一开始就有的哦!'}
 ],
 newtodo: ''
 }
 },
 methods: {
 reverse: function(){
 this.msg = this.msg.split('').reverse().join('')
 },
 add: function(){
 var text = this.newtodo.trim();
 if(text){
 this.todos.push({text:text});
 this.newtodo = ''
 }
 },
 remove: function(index){
 this.todos.splice(index,1)
 }
 }
}
</script>