這篇文章運用簡單易懂的例子給大家介紹波譜擬合的實現——Vue篇，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創新互聯服務項目包括江口網站建設、江口網站制作、江口網頁制作以及江口網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，江口網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到江口省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

主頁面-功能介紹

波譜擬合用來對某種材料或物質的譜圖進行識別和分析，每種物質可以有多種成分，每種成分用component1、component2...表示，用Add another component和Remove component來控制每種成分的增加和刪除，每種成分由多種原子核構成，即nuclei，用Add nucleus和Remove nucleus來控制每種成分內原子核數量，每新增一個原子核，波譜就會分裂一次，譜峰數量由（1->2->4->8...）依次分裂。另外可以通過更改默認參數，改變波譜形態，成分參數中：Relative amount表示每種成分占繪圖分量的百分比，百分比之和不超過100，giso用來計算分裂的中心位置，LineWidth用來控設置譜峰到譜谷的寬度，%Lorentzian表示譜峰形態，一共兩種形態，高斯和洛倫茲，兩者之和為100；原子核參數：No of equivalent nuclei用來改變原子核個數，如果一種成分內包含很多個一模一樣的參數時，就可以通過改變這個參數實現，Nuclear spin用來改變原子核種類，Hyperfine用來設置分裂后兩峰之間的寬度。

再來一張圖：

每種成分數量和參數、每種成分內每種原子核數量和參數設置好后，對數據進行處理，由三種結果，卷積、積分、二重積分，那就來看看數據的處理邏輯吧~

從數據流角度，主要進行三步處理：數據->數據裂變->光譜計算->繪圖，左邊是算法實現所需的參數、右邊是對數據及每個步驟的描述。

代碼實現

遇到一個坑，一開始寫demo的時候用的vue+Ant design of vue，在select等其他組件的使用上都是正常的，但是在input number中就很變態了，給input number綁定的change事件，用戶在輸入兩位以上數據的時候，change事件會觸發兩次！！！想避免這個問題，于是用blur事件，問題又來了，因為這個頁面中組件的生成和刪除需要動態渲染，并且根據前面的介紹很容易知道組件的渲染是有兩層結構的，那么在用戶進行點擊或輸入操作的時候，就需要傳遞一個參數（用來定位是哪個component以及每個component下面對應的某一個nucle等等），能力有限( ╯□╰ )目前我沒有找到解決辦法，于是轉elementUI框架。

組件的動態渲染用了一個比較巧妙的辦法，一開始我打算用render來寫，后來從部門大神那里學到通過遍歷列表進行渲染，腦子之間還是有差距的。。。

<div v-for="(Con, i) in componentList" :key="Con[i]"><strong>Component {{i+1}}.</div>

文章標題：波譜擬合的實現——Vue篇-創新互聯
當前路徑：http://www.yijiale78.com/article34/cesepe.html

成都網站建設公司_創新互聯，為您提供企業網站制作、小程序開發、網站導航、服務器托管、微信小程序、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯