Vue.js2.0 변경 요약 공유

일부 친구들은 Vue가 너무 빨리 업데이트되어 과정에서 가르치는 지식이 현재 Vue 버전과 일치하지 않아 오류를 보고한다고 생각합니다. 이 기사에서는 Vue.js2.0의 변경 사항에 대한 요약을 주로 공유합니다. 모두를 도와주세요.

1. Vue의 $index와 관련하여 인덱스 값 가져오기가 취소되었습니다. ul의 li와 같은 여러 요소에 대한 작업에 주로 사용됩니다. , 인덱스 값을 사용해야 하며 사용법은 다음과 같습니다.

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

인덱스 사용에 중점을 두고 제가 직접 만든 프래그먼트입니다.

관련 권장 사항:

Vue2.0 전역 스타일 예제 공유 설정

Vue2.0, 테이블 페이지 넘기기를 구현하는 ElementUI

Vue2.0 구성 요소 값 전달 문제

위 내용은 Vue.js2.0 변경 요약 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!