ES6提供了更加便捷的方法將Vue對象轉化為JSON格式的數據。我們可以使用JSON.stringify()方法將Vue對象轉換為JSON字符串,或者使用JSON.parse()方法將JSON字符串轉換為Vue對象。
const vueObj = { name: '小明', age: 18, hobby: ['看電影', '運動'] } // 將Vue對象轉換為JSON字符串 const jsonStr = JSON.stringify(vueObj) console.log(jsonStr) // 輸出:{"name":"小明","age":18,"hobby":["看電影","運動"]} // 將JSON字符串轉換為Vue對象 const vueObj2 = JSON.parse(jsonStr) console.log(vueObj2) // 輸出:{name: "小明", age: 18, hobby: Array(2)}
在使用JSON.stringify()方法轉換Vue對象時,我們可以傳入第二個參數,用于控制JSON字符串的格式。例如:
const vueObj = { name: '小明', age: 18, hobby: ['看電影', '運動'] } // 設置縮進為2個空格 const jsonStr = JSON.stringify(vueObj, null, 2) console.log(jsonStr) // 輸出: // { // "name": "小明", // "age": 18, // "hobby": [ // "看電影", // "運動" // ] // }
除此之外,我們也可以在Vue對象中定義toJSON()方法,用于自定義JSON字符串的格式:
const vueObj = { name: '小明', age: 18, hobby: ['看電影', '運動'], toJSON() { return { name: this.name, // 只保留名字 age: `${this.age}歲` // 年齡添加后綴“歲” } } } const jsonStr = JSON.stringify(vueObj) console.log(jsonStr) // 輸出:{"name":"小明","age":"18歲"}
通過以上方法,我們可以更加靈活方便地將Vue對象轉換為JSON格式的數據。同時,我們也可以根據具體需求進行自定義,滿足不同的數據處理需求。