vue.js에서 배열 요소를 삭제하는 방법

Vue.js 배열 요소 삭제 방법: 1. 배열에서 삭제할 요소의 첨자를 가져옵니다. 2. 첨자에서 계산하고 길이가 있는 요소를 삭제합니다.

이 기사의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터.

arr.splice(arr.indexOf(ele),length) 메서드가 있다는 것을 기억하시나요? 이 메서드는 모든 js 배열을 삭제하는 데 도움이 될 수 있으며 매우 실용적입니다.

arr.splice(arr.indexOf(ele),length) 메서드는 먼저 배열에 있는 요소의 첨자를 얻은 다음 이 첨자에서 계산하고 길이가 있는 요소를 삭제하는 것을 의미합니다.

코드 샘플:

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

추천 학습: php training

위 내용은 vue.js에서 배열 요소를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!