Heim > Web-Frontend > js-Tutorial > Hauptteil

Vue.js2.0 ändert die Zusammenfassungsfreigabe

小云云
Freigeben: 2018-01-20 17:22:36
Original
1216 Leute haben es durchsucht

Einige Freunde sind der Meinung, dass Vue zu schnell aktualisiert wird, was dazu führt, dass das im Kurs vermittelte Wissen nicht mit der aktuellen Vue-Version übereinstimmt, und meldet daher hauptsächlich eine Zusammenfassung der Änderungen in Vue.js2.0. Ich hoffe, allen helfen zu können.

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


<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>
Nach dem Login kopieren

Dies ist ein Fragment, das ich selbst erstellt habe und das sich auf die Verwendung konzentriert des Indexes.

Verwandte Empfehlungen:

Vue2.0 legt die gemeinsame Nutzung globaler Stilinstanzen fest

Vue2.0, ElementUI implementiert das Umblättern von Tabellenseiten

Wertübergabeproblem der VUE2.0-Komponente

Das obige ist der detaillierte Inhalt vonVue.js2.0 ändert die Zusammenfassungsfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!