改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)
更新時(shí)間：2018年03月08日 09:15:08 作者：咖喱雞塊
下面小編就為大家分享一篇改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
在
<template>
<div>
<ul>
<li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
</ul>
<button @click="change3">改變數(shù)組第2個(gè)值,改成0</button>
<button @click="change4">改變數(shù)組第2個(gè)值,改成5</button>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data () {
return {
list : [ 1, 2, 3, 4],
list2 : [ 7, 8, 9, 0 ]
}
},
methods : {
//通過下標(biāo)來改變整個(gè)數(shù)組里的值也是行不通的
changeList () {
this.list[2] = 3
},
//通過數(shù)組長(zhǎng)度改變改個(gè)數(shù)組里的值是行不通的
changeList2 () {
this.length = 1
},
//第一我們可以通過，vue.set實(shí)列方法來改變，但我們要在開頭再引一入下vue包
// 1 第一個(gè)值代表需要改變的數(shù)組
// 2 第二個(gè)代表改變那一項(xiàng)
// 3 第三個(gè)代表改成什么值
//樣式語法 Vue.set(example1.items, indexOfItem, newValue)
change3 () {
Vue.set(this.list,1,0)
},
//通過 Array.prototype.splice 數(shù)組原型上的方法來改變整個(gè)數(shù)組的長(zhǎng)度或者內(nèi)容
//這個(gè)方法大家肯定常用，我就不細(xì)說了
change4 () {
this.list.splice(1,1,5)
}
}
}
</script>
這里因?yàn)椴僮鲉栴}我就在代碼中直接寫了注釋，更加能讓大家清楚的了解，如何通過那些方法改變數(shù)組的長(zhǎng)度，改變下標(biāo)的某一個(gè)元素。
以上這篇改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue3 name 屬性的使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR）
直接使用 Vue 構(gòu)建前端單頁面應(yīng)用，頁面源碼時(shí)只有簡(jiǎn)單的幾行 html，這并不利于網(wǎng)站的 SEO，這時(shí)候就需要服務(wù)端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
過濾器是一個(gè)通過輸入數(shù)據(jù)，能夠及時(shí)對(duì)數(shù)據(jù)進(jìn)行處理并返回一個(gè)數(shù)據(jù)結(jié)果的簡(jiǎn)單函數(shù)。下面這篇文章主要給大家介紹了關(guān)于vue.js中過濾器使用的相關(guān)資料，需要的朋友可以參考借鑒，下面來看看詳細(xì)的介紹。2017-06-06
這篇文章主要介紹了vue中iframe的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在使用 Vue 開發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級(jí)的技術(shù)點(diǎn)，總會(huì)有用的，本文就介紹了15個(gè)Vue技巧，具有一定的參考價(jià)值，感興趣的可以了解一下2022-02-02
Vue唯一可以更改vuex實(shí)例中state數(shù)據(jù)狀態(tài)的屬性對(duì)象Mutation的講解
今天小編就為大家分享一篇關(guān)于Vue唯一可以更改vuex實(shí)例中state數(shù)據(jù)狀態(tài)的屬性對(duì)象，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式
這篇文章主要介紹了vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08