[vue]更新数组

如有错误，请指正！！！

一、语法介绍

1、问题来源
       我们在处理网页时，原有数组不能满足需求，需要去更新一个数组。
2、解决办法

• push()：给数组末尾添加元素，this.list.push(7,8,9)；

• pop()：删除数组末尾的元素，this.list.pop()；

• shift()：删除数组的第一个元素，this.list.shift()；

• unshift()：给数组的首位添加元素，this.list.unshift(7)；

• splice()：删除元素、插入元素、替换元素；

  第一个参数:表示开始插入或开始删除的元素下标

  删除元素， this.list.splice(1,3)；

  第二个参数：表示要删除几个元素（如果是没有参数，就删除后面所有元素）；

  插入元素，this.list.splice(1,0,7,8,9)；

  第二个参数：传入“0”,接上要插入的元素

  替换元素，this.list.splice(1,3,7,8,9)；

  第二个元素：表示我们要替换几个元

• sore()：排序，this.list.sort()；

• reverse()：翻转 ，this.list.reverse()；

二、添加代码

<template>
  <h3>数组动态监听</h3>
  <button @click="addList">添加数据</button>
  <ul>
    <li v-for="(item,index) in names" :key="index">{{item}}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      names: ["iwen", "ime", "frank"],
    };
  },

  methods:{
    addList(){
        // 引起ui自动更新
        // this.names.push("sakura");
        // 不会引起ui自动更新
        this.names.concat(["sakura"]);
        console.log(this.names.concat(["sakura"]));
    }

  }
};
</script>

三、结果展示

四、参考文献

[1] vue.js