Partager les modifications dans Vue.js2.0

J'ai récemment appris Vue.js. Lorsque j'ai regardé certains cours, Vue a peut-être été mis à jour trop rapidement, ce qui a entraîné une incohérence des connaissances enseignées dans le cours avec la version actuelle de Vue, ce qui a entraîné une erreur. avec vous le résumé des modifications de Vue.js2.0, j'espère que cela aidera 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 :

Introduction aux nouvelles fonctionnalités de Vue.js 2.5

vue.js fait une gestion de livre plateforme Étapes détaillées

Explication détaillée de la syntaxe vue.js et instructions communes

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!