欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vue 普通對象數(shù)據(jù)更新與 file 對象數(shù)據(jù)更新

 更新時間:2017年04月26日 17:12:16   作者:muge10  
本篇文章主要介紹了詳解Vue 普通對象數(shù)據(jù)更新與 file 對象數(shù)據(jù)更新 ,具有一定的參考價值,有興趣的可以了解一下。

最近在做一個多圖片上傳的組件,需求是做到多文件依次上傳,并顯示上傳進度條。

邏輯部分實現(xiàn)了以后,在更新進度條視圖的時候出現(xiàn)一點問題:動態(tài)計算生產的進度 progress 屬性不會自動更新。

原來的代碼是這樣寫的:

let files = this.filePicker.files;
if(!files.length) {
  return;
}

let arr = [];
for(let i = 0, len = files.length; i < len; i++) {
  let item = files[i];
  // 每個文件初始進度為0
  item.progress = '0';

  arr.push(obj);
}

this.fileArr = arr;

這里直接將 file 對象添加一個 progress 屬性記錄上傳進度,并初始化為0,然后上傳時候實時計算更新 progress。但奇怪的是這個 progress 在視圖里并不會自動更新,巋然不動,一直都是0。還了N中辦法,百思不得其解。

 后來一怒之下做了一個小 demo,看看問題到底出現(xiàn)在哪里,把不想關的代碼都剔除,只保留核心代碼,并用最簡單的數(shù)據(jù)來模擬一下。代碼如下:

// 用數(shù)組模擬 files, 用對象模擬 file 對象
let files = [];
for(let i = 0, len = 5; i < len; i++) {
  let obj = {name: 'name_' + 1};

  files.push(obj);
}

let arr = [];
for(let i = 0, len = files.length; i < len; i++) {
  files[i].progress = '0';
  arr.push(files[i]);
}

這里僅僅是把 files 對象換成了數(shù)組來模擬,把 file 對象換成了普通對象模擬。

神奇的是,這樣居然就自動更新了。

由于文件 file 后來都保存在數(shù)組里,這說明唯一的區(qū)別就在 file 對象上面!于是打算用普通對象保存 file 對象的屬性再試試。

let files = this.filePicker.files;
if(!files.length) {
  return;
}


let arr = [];
for(let i = 0, len = files.length; i < len; i++) {
  let item = files[i];
  let obj = {};

  obj.name = item.name;
  obj.size = item.size;

  obj.progress = '0';

  arr.push(obj);
}

這樣視圖也是可以自動更新的,果然是 file 對象和普通對象的區(qū)別。

它們究竟是什么區(qū)別呢?看一下他們的類型先。

console.log('files type', Object.prototype.toString.call(files));
// files type [object FileList]
console.log('arr  type', Object.prototype.toString.call(arr));
// arr  type [object Array]

console.log('item type', Object.prototype.toString.call (files[0]));
// item type [object File]
console.log('obj type', Object.prototype.toString.call (obj));
// obj type [object Object]

原來 files 是 FileList 類型,file 是 File 類型。而普通的 obj 是 Object 類型。

Vue 的數(shù)據(jù)更新利用的是 Object.defineProperty 的 getter setter 函數(shù)來實現(xiàn)的,而 Vue 默認沒有對 File 對象設置 getter setter, 因此用 File 對象不會自動更新。

解決辦法,就是用普通對象保存 file 對象里需要的信息,然后用來構造視圖數(shù)據(jù)?;蛘咦约菏謩釉O置 File 對象的 setter,也可以自動更新。代碼如下:

<div id="app">
  <input type="text" id='a'>
  <span id='b'></span>

  <input type="file" id='file'>
  <button type="button" id='button'>點擊更改file屬性</button>
</div>

<script>
  // 普通對象設置 setter
  var obj = {};
  Object.defineProperty(obj, 'hello', {
    set: function(newVal) {
      document.getElementById('a').value = newVal;
      document.getElementById('b').innerHTML = newVal;
    }
  });

  document.addEventListener('keyup', function(e){
    obj.hello = e.target.value;
  });

  // File 對象設置 setter
  var fileInput = document.getElementById('file');
  var file;
  fileInput.addEventListener('change', function(e){
    file = fileInput.files[0];

    Object.defineProperty(file, 'progress', {
      set: function(newVal) {
        // document.getElementById('a').value = newVal;
        document.getElementById('b').innerHTML = newVal;
      }
    });
  });

  document.getElementById('button').addEventListener('click', function(){
    file.progress = 'hello file';
  });

</script>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue3使用Pinia修改state的三種方法(直接修改,$patch,actions)

    vue3使用Pinia修改state的三種方法(直接修改,$patch,actions)

    Vue3?Pinia是一個狀態(tài)管理庫,專門為Vue3設計優(yōu)化,它提供了一種簡單而強大的方式來管理應用程序的狀態(tài),并且與Vue3的響應式系統(tǒng)緊密集成,本文給大家介紹了vue3使用Pinia修改state的三種方法,需要的朋友可以參考下
    2024-03-03
  • vue3引入Element-plus的詳細步驟記錄

    vue3引入Element-plus的詳細步驟記錄

    Element Plus是為適配Vue3而對Element UI進行重構后產生的前端組件庫,包含豐富的基礎組件,下面這篇文章主要給大家介紹了關于vue3引入Element-plus的相關資料,需要的朋友可以參考下
    2022-04-04
  • Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作

    Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作

    這篇文章主要介紹了Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue單選按鈕,選中如何改變其當前按鈕顏色

    vue單選按鈕,選中如何改變其當前按鈕顏色

    這篇文章主要介紹了vue單選按鈕,選中如何改變其當前按鈕顏色。具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue如何定義全局變量和全局方法實例代碼

    vue如何定義全局變量和全局方法實例代碼

    在項目中經(jīng)常會復用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時將它們設為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關于vue如何定義全局變量和全局方法的相關資料,需要的朋友可以參考下
    2023-04-04
  • vue使用i18n實現(xiàn)國際化的方法詳解

    vue使用i18n實現(xiàn)國際化的方法詳解

    這篇文章主要給大家介紹了關于vue使用i18n如何實現(xiàn)國際化的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-09-09
  • vue實現(xiàn)移動端多格輸入框

    vue實現(xiàn)移動端多格輸入框

    這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端多格輸入框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • VUE使用axios調用后臺API接口的方法

    VUE使用axios調用后臺API接口的方法

    這篇文章主要介紹了VUE使用axios調用后臺API接口的方法,文中講解非常細致,代碼幫助大家更好的理解和學習,感興趣的朋友可以了解下
    2020-08-08
  • vue第三方庫中存在擴展運算符報錯問題的解決方案

    vue第三方庫中存在擴展運算符報錯問題的解決方案

    這篇文章主要介紹了vue第三方庫中存在擴展運算符報錯問題,本文給大家分享解決方案,通過結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • Vue分頁組件實例代碼

    Vue分頁組件實例代碼

    這篇文章主要為大家詳細介紹了Vue分頁組件的實例代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04

最新評論