Vue中對數(shù)組和對象進(jìn)行遍歷和修改方式
更新時間：2022年08月23日 10:22:24 作者：a小毛同學(xué)
這篇文章主要介紹了Vue中對數(shù)組和對象進(jìn)行遍歷和修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
對數(shù)組和對象進(jìn)行遍歷和修改
1、對數(shù)組進(jìn)行循環(huán)
v-for進(jìn)行循環(huán)，有兩個參數(shù)（item，index）
注意：template可以成為占位符，在DOM里面不顯示
2、 修改數(shù)組的時候，不能直接通過下標(biāo)去增加修改刪除
（1）可以用過push/pop/shift/unshift/splice/sort/reverse方法
（2）也可以直接改變（重新定義）list數(shù)組的整體 （var list = [ ]）
（3）全局的Vue.set(app7.list,1<此處代表下標(biāo)>,2)
局部的app7.$set(app7.list,1<此處代表下標(biāo)>,2)
3、對對象進(jìn)行循環(huán)
v-for進(jìn)行循環(huán)，有三個參數(shù)（item，index，key）
4、增加對象的時候
（1）通過重新定義引用的對象 （var obj = { }）
（2）set方法 全局的Vue.set(app7.obj,“sex”<此處代表要增加的屬性>,“女”)
局部的app7.$set(app7.obj,“sex”<此處代表要增加的屬性>,“女”)
<!-- v-for的使用 -->
<div id="app7">
// 對數(shù)組進(jìn)行循環(huán)
<template v-for="(item,index) of list" :key="item.id">
<div>
{{item.text}} ---- {{index}}
</div>
<span>
{{item.text}} ---- {{index}}
</span>
</template>
//對對象進(jìn)行循環(huán)
<template v-for="(item,index,key) of obj">
<div>
{{item}} ---- {{index}}-----{{key}}
</div>
</template>
</div>
<script>
var app7 = new Vue({
el: '#app7',
data: {
list: [
{
id: "1",
text: '1'
},
{
id: "2",
text: '2'
},
{
id: "3",
text: '3'
},
],
obj: {
name: 'mao',
age: 28,
address: 'liulin'
}
}
})
</script>
修改數(shù)組和對象的特殊情況以及修改方法
div部分
? <div id="root">
? ? {{title}}
? ? <my-header></my-header>
? ? {{list}}
? ? {{obj}}
? </div>
? <div id="app">
? ? {{title}}
? </div>script部分
? <script>
? ? // 全局定義的組件
? ? Vue.component('my-header', {
? ? ? template: `
? ? ? ? <header>title</header>
? ? ? `
? ? })
? ? // 實例化Vue
? ? var vm = new Vue({
? ? ? el: '#root',
? ? ? data: {
? ? ? ? title: 'hello',
? ? ? ? list: ['a', 'b'],
? ? ? ? obj: {
? ? ? ? ? x: 0
? ? ? ? }
? ? ? }
? ? })
? ? var vm2 = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? title: 'world'
? ? ? }
? ? })
? </script>修改數(shù)組的兩個特殊情況
1.arr.length = 0, 不具備響應(yīng)特性
2.arr[0] = 100, 不具備響應(yīng)特性
- 修改對象的特殊情況
- 添加obj.x，x屬性，也不具備響應(yīng)特性
修補方法
vm.$set(target, propertyName/index, value)//實例化一個vue，試用貼set屬性改變對應(yīng)的value值 Vue.set(target, propertyName/index, value)//直接使用vue的屬性，要與實例化vue方法區(qū)分，這個沒有$ vm.$forceupdate()
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 修改網(wǎng)站圖標(biāo)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Element-plus表格數(shù)據(jù)延遲加載的實現(xiàn)方案
本文介紹了在前端展示大量數(shù)據(jù)時遇到的加載卡頓問題,并提供了一種解決方案：延遲加載,具體做法是設(shè)置加載數(shù)量,對于數(shù)據(jù)量較大的情況,進(jìn)行分批加載數(shù)據(jù),通過類選擇器找到表格滾動條并進(jìn)行監(jiān)聽綁定事件,感興趣的朋友跟隨小編一起看看吧2024-11-11
vite+vue3+element-plus搭建項目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項目的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue單頁面修改樣式無法覆蓋問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
本文主要介紹了element關(guān)于table拖拽排序問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要給大家介紹了關(guān)于Vue2.x安裝并使用SCSS的相關(guān)資料,以及如何在vue 2.x中全局引用公共scss文件,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue的webcamjs集成方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中解決微信html5原生ios虛擬鍵返回不刷新問題,本文給大家分享解決方法，通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決
這篇文章主要介紹了el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要給大家介紹了Vuex和前端緩存的整合策略的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來看看吧。2017-05-05