常用的方法

在 Vue 里数组方法也会触发视图更新。

  1. <body>
  2. <div id="app">
  3. <ul>
  4. <li v-for="study in arr">
  5. {{study}}
  6. </li>
  7. </ul>
  8. </div>
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. <script>
  11. let app = new Vue({
  12. el: '#app',
  13. data: {
  14. arr: [
  15. 'book',
  16. 'pen',
  17. 'pencli'
  18. ]
  19. }
  20. })
  21. </script>

push()

在数组末尾添加,返回值是新数组长度

pop()

删除数组最后一个元素,返回值是被删除的元素

shift()

删除数组第一个元素,返回值是被删除的元素

unshift()

在数组第一个元素位置添加,返回值是新数组长度

splice()

可以添加/删除数组,返回值是删除的元素
三个参数,第一个参数表示 开始操作的位置(下标/索引)
第二个参数表示 要操作的长度
第三个参数表示 要添加的元素

  1. arr=[
  2. 'book',
  3. 'pen',
  4. 'pencli'
  5. ]
  6. arr.splice(1,1)
  7. //arr:['book', 'pencli']
  8. arr.splice(0,0,'lili')
  9. //arr:['lili', 'book', 'pencli',]

sort()和 reverse()

  1. <body>
  2. <div id="app">
  3. <ul>
  4. <li v-for="study in arr">
  5. {{study}}
  6. </li>
  7. </ul>
  8. <button @click="sortArry">从小到大排序</button>
  9. <button @click="reverseArry">反转数组排序</button>
  10. </div>
  11. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  12. <script>
  13. let app = new Vue({
  14. el: '#app',
  15. data: {
  16. arr: [
  17. 'book',
  18. 'pen',
  19. 'pencli'
  20. ]
  21. },
  22. methods: {
  23. sortArry() {
  24. this.arr.sort(function (a, b) {
  25. return a.length - b.length
  26. })
  27. },
  28. reverseArry() {
  29. this.arr.reverse()
  30. }
  31. }
  32. })
  33. </script>

不能触发视图更新的有哪些呢

例如 filter()concat()slice()。它们不会变更原始数组,而总是返回一个新数组

场景:

  1. 改变数组中的指定项,(变更数组)
  2. 改变数组的长度(app.splice(1))

Vue里面给我们内置了一个 set()方法应对这样的情况

  1. Vue.set(target, index,value)
  2. Vue.set(app.arr, 1, 'car')
  3. //arr => ['book', 'car', 'pencli']

通过计算属性来实现数组过滤

  1. <-html->
  2. 计算属性来实现数组过滤<br>
  3. 数组中含有 'oo' 的项:{{matchoo}}
  4. <-Vue实例 ->
  5. <script>
  6. computed:{
  7. matchoo(){
  8. return this.arr.filter(function (book) {
  9. return book.match(/oo/)
  10. })
  11. }
  12. },
  13. </script>

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>数组更新</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <div v-for="study in arr">{{study}}</div>
  10. <button @click="sortArr">点我排序</button>
  11. <button @click="reserveArr">点我进行数组的翻转</button>
  12. <hr>
  13. 下面的按钮没效果,不信你试试看
  14. <button @click="changeOne">改变数组的指定项</button>
  15. <button @click="changeArrLength">改变数组的长度</button>
  16. <hr>
  17. 返回字符串中含有oo的项:
  18. {{ matchOO }}
  19. </div>
  20. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  21. <script>
  22. var app = new Vue({
  23. el:"#app",
  24. data:{
  25. arr:['book','pen','pencil']
  26. },
  27. computed:{
  28. matchOO:function () {
  29. //参数代表要过滤的每一项
  30. return this.arr.filter(function (book) {
  31. return book.match(/oo/);
  32. });
  33. }
  34. },
  35. methods:{
  36. //利用sort方法进行排序
  37. sortArr:function () {
  38. this.arr.sort(function (a,b) {
  39. //从小到大排
  40. return a.length- b.length;
  41. });
  42. },
  43. reserveArr:function () {
  44. this.arr.reverse();
  45. },
  46. //改变数组的指定项
  47. changeOne:function () {
  48. this.arr[0] = "car";
  49. },
  50. //改变数组的长度
  51. changeArrLength:function () {
  52. this.arr.length = 1;
  53. }
  54. }
  55. })
  56. //改变vue的第一项
  57. Vue.set(app.arr,1,"car");
  58. </script>
  59. </body>
  60. </html>