在HTML的head標簽中,可以使用JavaScript讀取JSON對象,而不需要在頁面中嵌入一個完整的JavaScript文件。
<script type="application/json" id="myData"> { "name": "Tom", "age": 23, "address": { "city": "Beijing", "country": "China" } } </script>
以上代碼將在head標簽中定義一個包含JSON數據的script標簽,并給定了一個id屬性來引用該對象。
const myData = JSON.parse(document.querySelector('#myData').textContent); console.log(myData.name); // 輸出 "Tom"
在JavaScript中,可以使用querySelector()方法獲取頁面中的元素,并使用textContent屬性獲取元素中的文本內容。將文本內容傳遞給JSON.parse()方法來解析JSON對象,然后可以讀取其中的屬性。
這種方法不僅可以簡化代碼,還可以提高頁面的性能。因為該JSON對象不需要在頁面加載時就下載到瀏覽器,而是在需要時才會被引用。
上一篇vue 文件目錄
下一篇vue json循環