Rumah > hujung hadapan web > View.js > Bagaimana untuk memadamkan elemen tatasusunan dalam vue.js

Bagaimana untuk memadamkan elemen tatasusunan dalam vue.js

王林
Lepaskan: 2021-10-11 15:08:15
asal
4043 orang telah melayarinya

Kaedah memadam elemen tatasusunan dalam vue.js: 1. Dapatkan subskrip elemen untuk dipadamkan dalam tatasusunan 2. Kira daripada subskrip dan padam elemen dengan panjang.

Bagaimana untuk memadamkan elemen tatasusunan dalam vue.js

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.9, komputer thinkpad t480.

Adakah anda ingat bahawa terdapat kaedah arr.splice(arr.indexOf(ele),length), kaedah ini boleh membantu kami memadam sebarang tatasusunan js, ia sangat praktikal.

Kaedah arr.splice(arr.indexOf(ele),length) bermaksud mendapatkan subskrip elemen dalam tatasusunan dahulu, kemudian mengira daripada subskrip ini dan memadamkan elemen dengan panjang.

Sampel kod:

<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>
Salin selepas log masuk

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Bagaimana untuk memadamkan elemen tatasusunan dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan