首頁 > 文章 > web前端 > 關於vue.js數組的變異方法

關於vue.js數組的變異方法

不言原創: 2018-06-30 16:16:061203瀏覽

本篇文章跟大家分享了vue.js陣列的變異方法的相關內容，有興趣的朋友跟著學習參考下。

Vue 包含一組觀察陣列的變異方法，所以它們也會觸發視圖更新。這些方法如下：

push()
#pop()
shift()
unshift()
splice()
sort()
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>

得到下面的結論：

# #push() 在陣列最後面加入一個元素，成功傳回目前陣列的長度

pop() 刪除陣列的最後一個元素，成功傳回刪除元素的值

#shift() 刪除陣列的第一個元素，成功傳回刪除元素的值

unshift() 往陣列最前面加入一個元素，成功傳回目前陣列的長度

#splice() 有三個參數，第一個是想要刪除的元素的下標（必選），第二個是想要刪除的個數（必選），第三個是刪除

後面想要在原始位置替換的值（可選）

sort() 使陣列按照字元編碼預設從小到大排序,成功返回排序後的陣列

# #reverse() 將陣列倒序，成功傳回倒序後的陣列

後來發現這些應該都是javascript本來的方法吧？以前javascript沒學好，剛好趁這次把這些方法的用法都拿回來！

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

關於vue.js數組的變異方法

相關文章