vue click事件传参数_6、Vue 中数组的操作

目标：

1、数组中常用的方法；
2、知道数组的"两个变动"检测不到；
3、"两个变动" 的解决方法。

---

一、push / pop / unshift / shift 方法

现在 Vue 实例中有这么一个数组：

<div id="app">
    <ul>
      <li v-for="person in personArr">    // 2、将数组中的人渲染到页面
        {{ person }}
      </li>
    </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    personArr: ['张三', '李四', '王二麻子']    // 1、一个装满了人的数组
  }
})

现在，在控制台中，分别使用 push / pop / unshift / shift 方法对数组进行操作（请注意页面渲染变化）：

---

二、sort / reverse 方法

还是上面那个数组，现在加两个按钮，分别对应 sort 方法和 reverse 方法：

<div id="app">
    <ul>
      <li v-for="person in personArr">
        {{ person }}
      </li>
    </ul>
    <button @click="sortArr">sort</button>        // 1、sort 按钮，并定义了 click 事件
    <button @click="reverseArr">reverse</button>  //    reverse 按钮，也定义了 click 事件
</div>

var app = new Vue({
  el: '#app',
  data: {
    personArr: ['张三', '李四', '王二麻子']
  },
  methods: {    // 2、事件要在 methods 中定义
    sortArr() {                      
      this.personArr.sort(function (a, b) {
        return b.length - a.length    // 3、为了效果，我写的 b.length - a.length，你也可以调换顺序试试
      })
    },
    reverseArr() {
      this.personArr.reverse()
    }
  }
})

页面渲染 及 点击效果：

---

三、splice 方法

splice 方法可以传入三个参数：

• 第一个参数：表示开始操作的位置；
• 第二个参数：表示要操作的个数（长度）；
• 第三个参数：（可选参数），可作为元素，传入数组。

splice ：可以对数组添加元素，也可以删除数组元素。

如果只传入前两个参数，就是 删除操作。

如果传入了第三个参数，就是 添加操作。

还是上面那个数组：

<div id="app">
    <ul>
      <li v-for="person in personArr">
        {{ person }}
      </li>
    </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    personArr: ['张三', '李四', '王二麻子']
  },
})

页面渲染：

现在在控制台中，使用 splice 方法对其进行操作：

（我只演示传一个参数，传两个参数，传三个参数的效果，你可以自己尝试传入不同参数）

上图中，splice 方法中只传入了一个参数。

这表示，从索引为 1 的位置开始，删除后面所有的元素，并返回被删除的元素。

所以图中只剩 "张三" 一个人。

上图中，splice 方法传入了两个参数。

这表示，从索引为 0 的元素开始，删除后面的 2 个元素，并返回被删除的元素。

所以图中只剩 "王二麻子" 一个人。

上图中，splice 方法传入了三个参数。

这表示，从索引为 1 的元素开始，删除 1 个元素，并在这个元素的位置，添加 'dongdong' 这个元素，最后会返回被删除的元素。

所以，图中还是三个人，只不过 "李四" 被替换成了 "dongdong"。

---

四、filter 方法

filter：过滤数组中的元素。

现在 Vue 实例中有这么一个数组：

<div id="app">
    {{ matchOO }}    // 4、在页面中渲染
</div>

var app = new Vue({
  el: '#app',
  data: {
    studyArr: ['book', 'pen', 'pencil']    // 1、一个装满了文具的数组
  },
  computed: {
    matchOO() {    // 2、计算属性中有一个 matchOO 方法，返回数组中含有 'oo' 字符串的元素
      return this.studyArr.filter(function (value) {    // 3、value 代表数组中的每一项
        return value.match(/oo/)
      }) 
    }
  }
})

页面渲染：

因为数组中的元素，只有 "book" 才含有 "oo" ，所以返回 "book"。

---

五、两个“数组变动”Vue 检测不到

数组的两个变动 Vue 检测不到：

• 改变数组的指定项
• 改变数组的长度

还是上面那个数组，现在加两个按钮，分别对应 改变指定项 和 改变长度：

<div id="app">
    <ul>
      <li v-for="person in personArr">
        {{ person }}
      </li>
    </ul>
    <button @click="changeItem">changeItem</button>      // 1、改变指定项 按钮
    <button @click="changeLength">changeLength</button>  //    改变长度 按钮
</div> 

var app = new Vue({
  el: '#app',
  data: {
    personArr: ['张三', '李四', '王二麻子']
  },
  methods: {    
    changeItem() {
      this.personArr[1] = 'dongdong'    // 2、将数组索引为 1 的元素改成 'dongdong'
    },
    changeLength() {
      this.personArr.length = 100    // 3、将数组长度改成 100
    }
  }
})

页面渲染：

当点击两个按钮时，发现页面没有任何变化。

可是某些时候，如果要改变 数组的指定项，或者 改变数组长度的话，我们可以使用如下解决方法：

• 改变数组的指定项

Vue.set(数组, 索引, 新元素)  // 注意 Vue 的首字母大写

如：

上图中，使用 Vue.set 方法，传入三个参数。

这表示，我要改变 personArr 这个数组，我要改变这个数组索引为 1 的元素，我要把这个元素改成 "dongdong"。

• 改变数组的长度

要改变数组长度，可以使用变通方法，即上面提到的数组的一些方法。

如：

上图中，数组长度原本是 3，使用了 splice 方法，删除了索引为 1 及以后的元素，并返回被删除的元素。此时，数组长度变成了 1。

上图中，使用了 push 方法， 向数组中添加了一个新元素。

此时数组长度由原来的 3 变成了 4。

你也可以使用其他方法改变数组长度，如：pop、unshift、shift 等。

完~~