Teilen von Änderungen in Vue.js2.0

Ich habe kürzlich Vue.js gelernt. Beim Ansehen einiger Kurse wurde Vue möglicherweise zu schnell aktualisiert, was dazu führte, dass das im Kurs vermittelte Wissen nicht mit der aktuellen Version von Vue übereinstimmte, was hauptsächlich zu einem Fehler führte teilt mit Ihnen die Vue.js2.0-Zusammenfassung der Änderungen und hoffe, dass sie allen hilft.

1. Der von $index in Vue erhaltene Indexwert wird hauptsächlich für Operationen an mehreren Elementen verwendet, z. B. werden mehrere Lis über v-for erstellt Sie oder Für einige Li-Operationen müssen Sie den Indexwert verwenden. Die Verwendung ist wie folgt:

<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: &#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>

Dies ist ein Fragment, das ich selbst erstellt habe Verwendung von Index.

Verwandte Empfehlungen:

Einführung in die neuen Funktionen von Vue.js 2.5

vue.js führt eine Buchverwaltung durch Plattform Detaillierte Schritte

Detaillierte Erklärung der vue.js-Syntax und allgemeine Anweisungen

Das obige ist der detaillierte Inhalt vonTeilen von Änderungen in Vue.js2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!