溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)

發(fā)布時(shí)間：2020-09-26 13:59:04 來源：腳本之家 閱讀：205 作者：咖喱雞塊 欄目：web開發(fā)

由于 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è)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手