Vue.js2.0变化小结分享

有小伙伴觉得Vue更新太快了导致课程所讲知识和现在Vue的版本不符，从而报错，本文主要和大家分享Vue.js2.0变化小结，希望能帮助到大家。

1.关于Vue中$index获取索引值已经取消，多用于多个元素的操作，像ul中的li，通过v-for来建立多个li，如果对于其中的某个或者一些li操作的话，需要使用到索引值，用法如下;

<template>
 <p 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>
 </p>
</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>

这是我自己组建的一个片段，重点在于index的使用。

相关推荐：

Vue2.0设置全局样式实例分享

Vue2.0、ElementUI实现表格翻页

VUE2.0组件的传值问题

以上就是Vue.js2.0变化小结分享的详细内容，更多请关注php中文网其它相关文章！