Vuejs從數(shù)組中刪除元素的示例代碼
更新時間:2023年02月01日 16:06:22 作者:ZNineSun
這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
Vuejs從數(shù)組中刪除元素
使用方法:arr.splice(arr.indexOf(ele),length):表示先獲取這個數(shù)組中這個元素的下標,然后從這個下標開始計算,刪除長度為length的元素 這種刪除方式適用于任何js數(shù)組
eg:
<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:'zx',
age:18,
addrress:'江蘇南京',
email:'1773203101@qq.com',
contacted:false,
},
{
name:'zhiyi',
age:19,
addrress:'中國北京',
email:'1773203101@qq.com',
contacted:false,
},
{
name:'zhuxu',
age:20,
addrress:'中國上海',
email:'1773203101@qq.com',
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>補充:vue 刪除數(shù)組中的某一條數(shù)據(jù)
一、刪除普通數(shù)組
let arr = [1,2,3,4,5];
//方法一
let index = arr.indexOf('3');
arr.splice(index, 1)
//打印結果 [1,2,4,5]
//方法二
let index = arr .findIndex(item => {
if (item == '3') {
return true
}
})
arr.splice(index, 1)
//打印結果 [1,2,4,5]二、刪除數(shù)組對象
let arr = [
{
id:1,
name:'張三'
},
{
id:2,
name:'李四'
},
{
id:3,
name:'王二'
},
{
id:4,
name:'麻子'
},
];
let id1 = arr.findIndex(item => {
if (item.id == '3') {
return true
}
})
arr.splice(id1, 1)三、歡迎添加更多方法,以上是我覺得最簡單的方法
到此這篇關于Vuejs從數(shù)組中刪除元素的文章就介紹到這了,更多相關vue數(shù)組中刪除元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解
這篇文章主要介紹了Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
Vue 實現(xiàn)復制功能,不需要任何結構內(nèi)容直接復制方式
今天小編就為大家分享一篇Vue 實現(xiàn)復制功能,不需要任何結構內(nèi)容直接復制方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
詳解Vue的watch中的immediate與watch是什么意思
這篇文章主要介紹了詳解Vue的watch中的immediate與watch是什么意思,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-12-12

