ホームページ > 記事 > ウェブフロントエンド > vue.js配列の変異方法について

vue.js配列の変異方法について

不言オリジナル: 2018-06-30 16:16:061202ブラウズ

この記事では、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() には 3 つのパラメータがあります。1 つ目は削除する要素の添字 (必須)、2 つ目は削除する数値です。削除したい値（必須）、3番目は削除後です

元の位置に置き換えたい値（オプション）

sort() はデフォルトで文字エンコーディングに従って小さいものから大きいものまで配列をソートし、正常にソートしますソートされた配列を返します

reverse() は配列を反転し、反転した配列を正常に返します

後で知ったのですが、これらは JavaScript の本来のメソッドですよね。私はこれまで JavaScript をあまり学習していなかったので、この機会にこれらのメソッドの使用方法を学習しました。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

vue.js配列の変異方法について

関連記事