Vue.js2.0 changes summary sharing

Some friends feel that Vue updates too quickly, causing the knowledge taught in the course to be inconsistent with the current Vue version, thus reporting errors. This article mainly shares with you a summary of the changes in Vue.js2.0, hoping to help everyone.

1. Regarding $index in Vue, getting the index value has been cancelled. It is mostly used for operations on multiple elements, like li in ul. Multiple li's are created through v-for. If for one of them or For some li operations, you need to use the index value. The usage is as follows;

<template>
 <p class="hello">
  <h1 id="nbsp-msg-nbsp">{{ 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: &#39;HelloWorld&#39;,
 data () {
  return {
   msg: &#39;Welcome to Your Vue.js App&#39;,
   todos: [
    {text:&#39;我是一开始就有的哦!&#39;}
   ],
   newtodo: &#39;&#39;
  }
 },
 methods: {
  reverse: function(){
   this.msg = this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;)
  },
  add: function(){
   var text = this.newtodo.trim();
   if(text){
    this.todos.push({text:text});
    this.newtodo = &#39;&#39;
   }
  },
  remove: function(index){
   this.todos.splice(index,1)
  }
 }
}
</script>

This is a fragment I built myself, focusing on the use of index.

Related recommendations:

Vue2.0 setting global style instance sharing

Vue2.0, ElementUI realizes table page turning

Value passing problem of VUE2.0 component

The above is the detailed content of Vue.js2.0 changes summary sharing. For more information, please follow other related articles on the PHP Chinese website!