Comment supprimer des éléments de tableau dans vue.js

Méthode Vue.js pour supprimer des éléments du tableau : 1. Obtenez l'indice de l'élément à supprimer dans le tableau 2. Calculez à partir de l'indice et supprimez les éléments avec la longueur.

L'environnement d'exploitation de cet article : système windows10, vue.js 2.9, ordinateur thinkpad t480.

Vous souvenez-vous qu'il existe une méthode arr.splice(arr.indexOf(ele),length), cette méthode peut nous aider à supprimer n'importe quel tableau js, c'est très pratique. La méthode

arr.splice(arr.indexOf(ele),length) signifie d'abord obtenir l'indice de l'élément dans le tableau, puis calculer à partir de cet indice et supprimer l'élément avec la longueur.

Exemple de code :

<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>

Apprentissage recommandé : formation php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!