Vue.js2.0 modifie le partage du résumé

Certains amis estiment que Vue se met à jour trop rapidement, ce qui rend les connaissances enseignées dans le cours incohérentes avec la version actuelle de Vue, signalant ainsi des erreurs. Cet article partage principalement avec vous un résumé des modifications apportées à Vue.js2.0, en espérant aider tout le monde.

1. La valeur d'index obtenue par $index dans Vue a été annulée. Elle est principalement utilisée pour les opérations sur plusieurs éléments, comme li dans ul. Plusieurs li sont créés via v-for. eux ou Pour certaines opérations li, vous devez utiliser la valeur d'index. L'utilisation est la suivante

<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>

Il s'agit d'un fragment que j'ai créé moi-même, en me concentrant sur le ; utilisation de l'index.

Recommandations associées :

Vue2.0 définissant le partage d'exemples de style global

Vue2.0, ElementUI implémente le changement de page de tableau

Problème de transmission de valeur du composant VUE2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!