vuejs如何實現(xiàn)字符串轉對象

本篇內(nèi)容主要講解“vuejs如何實現(xiàn)字符串轉對象”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vuejs如何實現(xiàn)字符串轉對象”吧!

vuejs實現(xiàn)字符串轉對象的方法：1、從數(shù)據(jù)庫表中讀取原數(shù)據(jù)；2、通過“this.temporary=JSON.parse(row.selections);”方法將字符串轉換成json對象即可。

本文操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuejs怎么實現(xiàn)字符串轉對象？

vue.js對String類型轉json格式及json對象轉String：

在寫vue項目的時候，由于數(shù)據(jù)量龐大轉化格式相對比較復雜，于是就直接表單獲取值按String格式存入了數(shù)據(jù)庫表中，但是在編輯記錄的時候，又得從數(shù)據(jù)庫表中按id讀取，再相對應的在頁面上顯示；

于是：就教大家如何在vue項目中怎么進行String格式 Json格式的相互轉化：

且看數(shù)據(jù)庫存放的數(shù)據(jù)格式；本文以selections字段為例；


接下來，我就來演示一下，String格式，json格式是如何相對轉換
vue.js 部分重要演示代碼附上：

editFormBuilder(row){
//aa bb cc 只是在方便調試更清楚的看到從數(shù)據(jù)庫表中拿的數(shù)據(jù)
		//從數(shù)據(jù)庫表中讀取原數(shù)據(jù)，注意看數(shù)據(jù)格式
        console.log("aa",row.selections);
        
        //接下來，如何解析成json型
        this.temporary=JSON.parse(row.selections);//將字符串轉換成json對象
        this.items=this.temporary;
        console.log("bb",this.items);
        
        //注意看，又把對象轉換成String型
       this.flag=JSON.stringify(row.selections);//將json對象轉換成字符串
        this.items=this.flg;
        console.log("cc",this.items);//再次轉化格式！注意看
      },

注意看下圖?。?！就會體會到JSON.parse ，JSON.stringify的魅力所在！

順便再詳細介紹一下兩函數(shù)的用法：【ps：詳情來至菜鳥教程 跳轉到菜鳥教程url】
(1)JSON.parse函數(shù) ：

作用：將json字符串轉換成json對象語法：JSON. parse(text[,reviver]).參數(shù)：text  必須；一個有效的json字符串。	reviver ：可選。返回值：一個對象或數(shù)組。

(2)JSON.stringify()函數(shù) ：

作用：將json對象轉換成json字符串。	語法：JSON.stringify(value [, replacer] [, space]) 	參數(shù)：value  必須；通常為對象或數(shù)組。		replacer：可選，用于轉換結果的函數(shù)或者數(shù)組。		space ：可選。向返回值 JSON 文本添加縮進、空格和換行符以使其更易于讀取。 	返回值：一個包含JSON文本的字符串。

到此，相信大家對“vuejs如何實現(xiàn)字符串轉對象”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！