数组的常用方法
- push方法:push方法可以往数组最后面追加元素,既可以追加一个元素,也可以同时追加多个元素
示例代码:使用push可以分别在数组最后追加元素,追加的元素可以是一个也可以是多个
<div id="app">
<ul>
<li v-for="letter in letters">
{{letter}}
</li>
<!-- push往数组最后一行追加元素 -->
<button @click="pushBtn">push方法</button>
<!-- push往数组最后一行追加多个元素 -->
<button @click="pushsBtn">push方法添加多个元素</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'E', 'C', 'D']
},
methods: {
pushBtn() {
this.letters.push('E')
},
pushsBtn() {
this.letters.push('a', 'b', 'c')
}
}
});
</script>
- pop方法:pop方法可以删除数组的最后一个元素
示例代码:使用pop方法可以删除数组的最后一个元素,与push方法相对
<div id="app">
<ul>
<li v-for="letter in letters">
{{letter}}
</li>
<!-- pop删除数组的最后一个元素 -->
<button @click="popBtn">pop方法</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'E', 'C', 'D']
},
methods: {
popBtn() {
this.letters.pop()
}
}
});
</script>
- shift方法:shift方法可以删除数组的第一个元素
示例代码:
<div id="app">
<ul>
<li v-for="letter in letters">
{{letter}}
</li>
<!-- shift删除数组中的第一个元素 -->
<button @click="shiftBtn">shift方法</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'E', 'C', 'D']
},
methods: {
shiftBtn() {
this.letters.shift()
}
}
});
</script>
- unshift方法:unshift方法可以在数组第一个元素之前添加元素,可以添加一个也可以添加多个,与shift相对
示例代码:
<div id="app">
<ul>
<li v-for="letter in letters">
{{letter}}
</li>
<!-- unshift在数组最前面添加元素 -->
<button @click="unShiftBtn">unshift方法</button>
<!-- unshift在数组最前面添加多个元素 -->
<button @click="unShiftsBtn">unshift方法添加多个元素</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'E', 'C', 'D']
},
methods: {
unShiftBtn() {
this.letters.unshift('a')
},
unShiftsBtn() {
this.letters.unshift('a', 'b', 'c')
},
}
});
</script>
- splice方法:splice拥有三种用法,增加删除与修改
当splice的参数为1个时,表示删除该参数位置以后的所有元素;当splice参数为2时,表示删除从第一个参数开始,后面几个元素,删除几个元素取决于第二个参数的值;当splice参数为3个时,第一个参数表示从哪个位置开始,第二个参数必须为0,第三个参数以后便是所需要插入的值;当需要利用splice修改数组时,其实原理与插入元素差不多,就是将第二个参数修改成后面需要插入的值。
简单来说,splice的第一个参数一般是表示操作的起始位置,第二个参数表示操作的位数,第三个参数开始后面的参数表示需要更改的新值
示例代码:
<div id="app">
<ul>
<li v-for="letter in letters">
{{letter}}
</li>
<!-- splice的作用:删除元素、插入元素、替换元素 -->
<!--
操作的开始位置
删除元素:
splice(start,num)从哪里开始,删除几位
splice(start)从哪里开始,后面全删除
-->
<button @click="splice1Btn">splice删除元素</button>
<!-- splice插入元素 -->
<button @click="splice2Btn">splice插入元素</button>
<!-- splice修改元素 -->
<button @click="splice3Btn">splice修改元素</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'E', 'C', 'D']
},
methods: {
splice1Btn() {
this.letters.splice(1, 1)
},
splice2Btn() {
this.letters.splice(1, 0, 'aaa')
},
splice3Btn() {
this.letters.splice(1, 2, 'b', 'c')
},
}
});
</script>
- sort方法:sort方法用于对数组元素进行排序
<div id="app">
<ul>
<li v-for="letter in letters">
{{letter}}
</li>
<button @click="sortBtn">sort排列元素</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'E', 'C', 'D']
},
methods: {
sortBtn() {
this.letters.sort()
}
}
});
</script>
- reverse方法:reverse方法可以对数组元素进行翻转,当需要对数组元素进行逆向排序时,可以同时使用sort和reverse
示例代码:
<div id="app">
<ul>
<li v-for="letter in letters">
{{letter}}
</li>
<!-- reverse反转元素 -->
<button @click="reverseBtn">reverse反转元素</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'E', 'C', 'D']
},
methods: {
reverseBtn() {
this.letters.reverse()
}
}
});
</script>