Vue数组变化侦听

 push()、

pop()、

shift()、

unshift()、

splice()、

sort()、

reverse()、

filter()、

concat()、

slice()、

<template>
  <input type="button" value="操作" @click="add">
  <ul v-for="item in names">
    <li>{{ item }}</li>
  </ul>

  <input type="button" value="filter" @click="add">
  <ul v-for="item in msgs">
    <li>{{ item.name }}-{{ item.age }}</li>
  </ul>

</template>
<script>
export default {
  data() {
    return {
      names:["zhangsan","lisi","wangwu"],
      msgs: [{name:"zhangsan",age:10},{name:"lisi",age:20},{name:"wangwu",age:16}],
      data: ['小馨', '小白', '小张', '小航', '小馨', '小航']
    }
  },
  methods: {
    add() {
      // 变更方法
      // this.names.push("sakura") // 向数组最后面添加一个元素，成功返回当前数组的长度
      // this.names.pop() // 删除数组的最后一个元素，成功返回删除元素的值
      // this.names.shift() // 删除数组的第一个元素，成功返回删除元素的值
      // this.names.unshift("sakura") // 向数组最前面添加一个元素，成功返回当前数组的长度

      // splice()有三个参数，
      // 第一个是想要删除的元素的下标(必选)，
      // 第二个是想要删除的个数（必选），
      // 第三个是删除后原位置想要替换的值
        // this.names.splice(0, 1, "yyy") // 删除
        // this.names.splice(0,1) // 修改
        // this.names.splice(3,0,"yyy") //新增

      // this.names.sort() // 数组按照字符编码默认从小到大排序，成功返回排序后的数组
      // this.names.reverse() // 将数组倒序，成功返回倒序的数组

      // 替换一个数组
      // this.names.concat("sakura") // 用于连接两个或者多个数组，该方法不会改变现有数组
      // this.msgs = this.msgs.filter(item => item.age > 15) // 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
      
      this.newData = this.data.filter((item, index, self) => self.indexOf(item) === index)
      console.log(this.newData)
      console.log(this.data.indexOf("小航",-1)) // 索引值为负数，从0开始 从左到右
      console.log(this.data.indexOf("小航", 6))
      console.log(this.data.lastIndexOf("小航", -1)) // 索引值为负数，从最右端开始 从右到左

      console.log(this.data.lastIndexOf("小航",5)) //从索引值开始 从右到左


      console.log(this.data.indexOf("小航"))



      // this.names = this.names.slice() // 可从已有数组中返回选定的元素。该方法并不会修改原数组，而是返回一个子数组
      // this.names = this.names.slice(1,2) // 根据数组下标取值，左闭右开

    }
  }
}
</script>