Vue中数组的变化

目录

• ❀改变原数组的方法

---

• ❀不改变原数组的方法

---

• ❀动态修改数组

改变原数组的方法

push()增加
pop()移除末尾元素
等等…

示例

html

<div id="app">
        <ul>
            <li v-for="item,k in list">{{item}}</li>
        </ul>
        <input type="text" v-model="mess" />
        <button @click="add">Add</button>
        <button @click="del">Del</button>
    </div>

js

 var vm=new Vue({
        el:"#app",
        data:{
            mess:"你喜欢的水果",
            list:['apple','orange','banana']
        },
        methods:{
           add(){
                this.list.push(this.mess);  //会改变原始数组(push增加)
           },
           del(){
                this.list.pop();//会改变原始数组(尾部移除)
           }
        }
    })

效果图:

点击后:

成功~ 当然点del也能删除最后一项

---

不改变原数组的方法

.slice()返回取出的数据
slice(下标1,下标2)下标1~下标2
等等…

示例

html

<div id="app">
        <ul>
            <li v-for="item,k in list">{{item}}</li>
        </ul>
        <input type="text" v-model="mess" />
        <button @click="change">slice</button>
    </div>

关键代码js

//加入到methods中
	change(){
                var slice=this.list.slice(1,2);//不会改变原始数组(返回取出的数据)slice(下标1,下标2)下标1~下标2
                 console.log(slice);
           }

效果图:

打印出下标1·2之间的值
成功~

---

动态修改数组

语法: Vue的变量名.$set(数组,下标,修改后的值).
在Vue里边就用this代替

示例

html

<div id="app">
        <ul>
            <li v-for="item,k in list">{{item}}</li>
        </ul>
        <input type="text" v-model="mess" />
        <button @click="change">slice</button>
    </div>

关键代码js

	change(){
            this.$set(this.list,2,'popular')//动态修改数组
           }

效果图:

点击slice：

下标为2的值就改变了

---

vue中数组的变化完结~