집 > 기사 > 웹 프론트엔드 > vue.js 배열의 변이 방법에 대하여

vue.js 배열의 변이 방법에 대하여

不言원래의: 2018-06-30 16:16:061274검색

이 기사는 vue.js 배열의 돌연변이 방법에 대한 관련 내용을 공유합니다. 관심 있는 친구는 참고할 수 있습니다.

Vue에는 배열을 관찰하는 일련의 돌연변이 메서드가 포함되어 있어 뷰 업데이트도 트리거합니다. 이러한 메소드는 다음과 같습니다. ()

reverse()
의 기능은 무엇인가요? 나는 그것을 시도했습니다:

<body>
  <p id="app">
   <p>
    push方法：
    <input type="text" v-model="text" @keyup.enter="methodByPush">
    <input type="button" value="测试功能" @click="methodByPush">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </p>
    <p>
    pop方法：
    <input type="button" value="测试功能" @click="methodByPop">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </p>
   <p>
    shift方法：
    <input type="button" value="测试功能" @click="methodByShift">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </p>
    <p>
    unshift方法：
    <input type="text" v-model="text" @keyup.enter="methodByUnshift">
    <input type="button" value="测试功能" @click="methodByUnshift">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </p>
   <p>
    splice方法：
    <input type="button" value="测试功能" @click="methodBySplice">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </p>
   <p>
    sort方法：
    <input type="button" value="测试功能" @click="methodBySort">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </p> 
   <p>
   reverse方法：
    <input type="button" value="测试功能" @click="methodByReverse">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </p>
   result显示的地方：<br>
   <span v-text="result"></span>
  </p>

<script>
  var vm = new Vue({
   el: &#39;#app&#39;,
   data: {
    items: [],
    text: &#39;&#39;,
    result: &#39;&#39;
   },
   methods: {
    methodByPush: function () {
     this.result = this.items.push(this.text)
     this.text = &#39;&#39;
    },
    methodByPop: function () {
     this.result = &#39;&#39;
     this.result = this.items.pop()
    },
    methodByShift: function () {
     this.result = &#39;&#39;
     this.result = this.items.shift()
    },
    methodByUnshift: function () {
     this.result = &#39;&#39;
     this.result = this.items.unshift(this.text)
     this.text = &#39;&#39;
    },
    methodBySplice: function () {
     this.result = &#39;&#39;
     this.result = this.items.splice(2,1,&#39;yovan&#39;)
    },
    methodBySort: function () {
     this.result = &#39;&#39;
     this.result = this.items.sort()
    },
    methodByReverse: function () {
     this.result = &#39;&#39;
     this.result = this.items.reverse()
     alert(this.result)
    }
   }
  })
</script>

그리고 다음과 같은 결론을 얻었습니다:
pop()은 배열을 삭제합니다. 배열의 마지막 요소는 삭제된 요소의 값을 성공적으로 반환합니다.
shift() 배열의 첫 번째 요소를 삭제하고 삭제된 요소의 값을 성공적으로 반환합니다.

splice()에는 세 개의 매개변수가 있습니다. 첫 번째는 삭제하려는 요소의 첨자(필수)이고 두 번째는 삭제하려는 숫자입니다. 삭제하고 싶음(필수), 세 번째는 삭제 후임

원래 위치에서 바꾸려는 값(선택)

sort()는 기본적으로 문자 인코딩에 따라 배열을 작은 것부터 큰 것까지 정렬하고 성공적으로 정렬된 배열을 반환합니다

reverse()는 배열을 뒤집고, 역방향 배열을 성공적으로 반환합니다.

나중에 이것이 자바스크립트의 원래 메서드여야 한다는 것을 알았습니다. 이전에는 JavaScript를 잘 배우지 않았는데, 이번 기회에 이러한 방법을 사용하는 방법을 배웠습니다!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

vue.js 배열의 변이 방법에 대하여

관련 기사