當前位置：首頁 > 前端技术 > vue >内容正文

vue

016_Vue数组数据的响应式处理

發布時間：2025/5/22 vue 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 016_Vue数组数据的响应式处理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 數組數據的響應式處理

1.1. 第一個參數表示要處理的數組名稱;?第二個參數表示要處理的數組索引;?第三個參數表示要處理的數組的值。

Vue.set(vm.list, index, newValue); vm.$set(vm.list, index, newValue);

1.2. 代碼?

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>數組數據的響應式處理</title></head><body><div id="app"><div><ul><li v-for="item in list">{{item}}</li></ul></div><div><span>{{info.name}}</span><span>{{info.age}}</span><span>{{info.gender}}</span></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {list: ["JavaScript DOM編程藝術", "高性能JavaScript", "javascript高級程序設計"]}});// vm.list[1] = "JavaScript權威指南"; // 這樣修改數組數據, 不具備響應式Vue.set(vm.list, 0, "你不知道的JavaScript");vm.$set(vm.list, 1, "JavaScript權威指南");</script></body> </html>

1.3. 效果圖

總結

以上是生活随笔為你收集整理的016_Vue数组数据的响应式处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。