pop
<template>
<div class="myBlock">
<div class="tableBlock">
<div class="title">
{{ newObject ? "操作后的数组" : "操作前的数组" }}
</div>
<el-table :data="tableData" :key="num" stripe border>
<el-table-column prop="name" label="姓名" width="200">
</el-table-column>
<el-table-column prop="phone" label="电话" width="200">
</el-table-column>
<el-table-column prop="idCard" label="证件号">
</el-table-column>
</el-table>
</div>
<div class="operate">
<el-button type="success" plain @click="operate">
pop
</el-button>
</div>
<div class="title" v-if="newObject">操作后的返回值</div>
<div class="newObject">
{{ newObject }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
num: 0,
newObject: null,
};
},
watch: {},
mounted() {
for (var i = 1; i < 4; i++) {
this.tableData.push({
name: "员工" + i + "号",
phone: "153****0000",
idCard: "1111**********0000",
});
}
},
methods: {
operate() {
this.newObject = this.tableData.pop();
this.num += 1;
},
},
};
</script>
操作前
![操作前](https://i-blog.csdnimg.cn/blog_migrate/41ae545f1e96979892e35bbdc33ee31b.png)
操作后
![操作后](https://i-blog.csdnimg.cn/blog_migrate/dbd635fff6df4e5b80d1400f4fe9963b.png)
push
- 从尾部添加一项。
- 改变原有数组。
- 返回操作后的数组的长度。
<template>
<div class="myBlock">
<div class="tableBlock">
<div class="title">
{{ newObject ? "操作后的数组" : "操作前的数组" }}
</div>
<el-table :data="tableData" :key="num" stripe border>
<el-table-column prop="name" label="姓名" width="200">
</el-table-column>
<el-table-column prop="phone" label="电话" width="200">
</el-table-column>
<el-table-column prop="idCard" label="证件号">
</el-table-column>
</el-table>
</div>
<div class="operate">
<el-button type="success" plain @click="operate">
push
</el-button>
</div>
<div class="title" v-if="newObject">操作后的返回值</div>
<div class="newObject">
{{ newObject }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
num: 0,
newObject: null,
};
},
watch: {},
mounted() {
for (var i = 1; i < 4; i++) {
this.tableData.push({
name: "员工" + i + "号",
phone: "153****0000",
idCard: "1111**********0000",
});
}
},
methods: {
operate() {
this.newObject = this.tableData.push({
name: "test",
phone: "testPhone",
idCard: "testIdCars",
});
this.num += 1;
},
},
};
</script>
操作前
![操作前](https://i-blog.csdnimg.cn/blog_migrate/4565f87fb6cafc99aeab7fce5da492e6.png)
操作后
![操作后](https://i-blog.csdnimg.cn/blog_migrate/4bca2c44452976c6b3fee6994ebfc849.png)
shift
<template>
<div class="myBlock">
<div class="tableBlock">
<div class="title">
{{ newObject ? "操作后的数组" : "操作前的数组" }}
</div>
<el-table :data="tableData" :key="num" stripe border>
<el-table-column prop="name" label="姓名" width="200">
</el-table-column>
<el-table-column prop="phone" label="电话" width="200">
</el-table-column>
<el-table-column prop="idCard" label="证件号">
</el-table-column>
</el-table>
</div>
<div class="operate">
<el-button type="success" plain @click="operate">
shift
</el-button>
</div>
<div class="title" v-if="newObject">操作后的返回值</div>
<div class="newObject">
{{ newObject }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
num: 0,
newObject: null,
};
},
watch: {},
mounted() {
for (var i = 1; i < 4; i++) {
this.tableData.push({
name: "员工" + i + "号",
phone: "153****0000",
idCard: "1111**********0000",
});
}
},
methods: {
operate() {
this.newObject = this.tableData.shift();
this.num += 1;
},
},
};
</script>
操作前
![操作前](https://i-blog.csdnimg.cn/blog_migrate/bb0bfe21b8499938e31480a84090e644.png)
操作后
![操作后](https://i-blog.csdnimg.cn/blog_migrate/21021ab64823c4032f7b56dc423fd31f.png)
unshift
- 从头部添加一项。
- 改变原有数组。
- 返回添加后的数组的长度。
<template>
<div class="myBlock">
<div class="tableBlock">
<div class="title">
{{ newObject ? "操作后的数组" : "操作前的数组" }}
</div>
<el-table :data="tableData" :key="num" stripe border>
<el-table-column prop="name" label="姓名" width="200">
</el-table-column>
<el-table-column prop="phone" label="电话" width="200">
</el-table-column>
<el-table-column prop="idCard" label="证件号">
</el-table-column>
</el-table>
</div>
<div class="operate">
<el-button type="success" plain @click="operate">
unshift
</el-button>
</div>
<div class="title" v-if="newObject">操作后的返回值</div>
<div class="newObject">
{{ newObject }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
num: 0,
newObject: null,
};
},
watch: {},
mounted() {
for (var i = 1; i < 4; i++) {
this.tableData.push({
name: "员工" + i + "号",
phone: "153****0000",
idCard: "1111**********0000",
});
}
},
methods: {
operate() {
this.newObject = this.tableData.unshift({
name: "test",
phone: "testPhone",
idCard: "testIdCars",
});
this.num += 1;
},
},
};
</script>
操作前
![操作前](https://i-blog.csdnimg.cn/blog_migrate/e9a656c617c06a9c433cfa77a26f1635.png)
操作后
![操作后](https://i-blog.csdnimg.cn/blog_migrate/dcb3324c9c8d1a8e7fb2cc206ea16579.png)