So löschen Sie Array-Elemente in vue.js

Vue.js-Methode zum Löschen von Array-Elementen: 1. Den Index des zu löschenden Elements im Array abrufen. 2. Aus dem Index berechnen und Elemente mit Länge löschen.

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

Erinnern Sie sich, dass es eine Methode arr.splice(arr.indexOf(ele),length) gibt, diese Methode kann uns helfen, jedes JS-Array zu löschen, sie ist sehr praktisch. Die Methode

arr.splice(arr.indexOf(ele),length) bedeutet, zuerst den Index des Elements im Array zu erhalten, dann aus diesem Index zu berechnen und das Element mit der Länge zu löschen.

Codebeispiel:

<template>
 <div class="users">
	<button type="button" class="btn btn-danger" v-on:click="deleteUser(user)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button>	
 </div>
</template>

<script>
//引入jquery

export default {

  data(){
		return {
			
			users:[
				{
					name:&#39;zx&#39;,
					age:18,
					addrress:&#39;江苏南京&#39;,
					email:&#39;1773203101@qq.com&#39;,
					contacted:false,
				},
				{
					name:&#39;zhiyi&#39;,
					age:19,
					addrress:&#39;中国北京&#39;,
					email:&#39;1773203101@qq.com&#39;,
					contacted:false,
				},
				{
					name:&#39;zhuxu&#39;,
					age:20,
					addrress:&#39;中国上海&#39;,
					email:&#39;1773203101@qq.com&#39;,
					contacted:false,
				},
			]
		}
	},
	methods:{
		deleteUser:function(user){
			//表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
			this.users.splice(this.users.indexOf(user),1);
		}
	}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--scope只会影响到当前组件的样式-->
<style scoped>
</style>

Empfohlenes Lernen: php-Training

Das obige ist der detaillierte Inhalt vonSo löschen Sie Array-Elemente in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!