vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
更新時間：2019年08月03日 09:36:38 作者：TANKING-
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能,結(jié)合實例形式分析了vue.js針對本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能。分享給大家供大家參考，具體如下：
1、首先通過json.php把數(shù)據(jù)庫給輸出為json格式的數(shù)據(jù)
[
{
"id":1,
"resname":"百度",
"resimg":"http://www.baidu.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.baidu.com/1.apk",
"pageview":"100"
},
{
"id":2,
"resname":"阿里巴巴",
"resimg":"http://www.alibaba.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.alibaba.com/1.apk",
"pageview":"200"
},
{
"id":3,
"resname":"騰訊",
"resimg":"http://www.qq.com/1.jpg",
"resint":"2018-1-18",
"resurl":"http://www.qq.com/1.apk",
"pageview":"300"
}
]
然后通過vue.js來解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>VUE解析JSON數(shù)據(jù)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<table border=1>
<tr>
<td>ID</td>
<td>資源名稱</td>
<td>LOGO</td>
<td>更新時間</td>
<td>下載地址</td>
<td>閱讀量</td>
</tr>
<tr v-for="r in rows">
<td>{{r.id}}</td>
<td>{{r.resname}}</td>
<td><img v-bind:src="r.resimg"/></td>
<td>{{r.resint}}</td>
<td><a v-bind:href="r.resurl" rel="external nofollow" >點擊下載</a></td>
<td>{{r.pageview}}</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$.getJSON("data.json", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>
最終運行index.html
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
vue中利用mqtt服務(wù)端實現(xiàn)即時通訊的步驟記錄
前些日子了解到mqtt這樣一個協(xié)議,可以在web上達(dá)到即時通訊的效果,所以下面這篇文章主要給大家介紹了關(guān)于vue中如何利用mqtt服務(wù)端實現(xiàn)即時通訊的相關(guān)資料,需要的朋友可以參考下2021-07-07
electron?vue?模仿qq登錄界面功能實現(xiàn)
這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項目，安裝electron，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
使用vue.js實現(xiàn)checkbox的全選和多個的刪除功能
這篇文章主要介紹了使用vue.js實現(xiàn)checkbox的全選和多個的刪除功能,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了如何使用Vue和React分別實現(xiàn)錨點定位功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以學(xué)習(xí)一下2024-01-01
關(guān)于vue3使用particles粒子特效的問題
這篇文章主要介紹了關(guān)于vue3使用particles粒子特效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題
這篇文章主要介紹了vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue彈窗如何嵌入其它vue頁面,實現(xiàn)方式是將其他頁面作為組件傳入，在父頁面將該組件引入到彈框內(nèi)，實例代碼簡單易懂需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue微信分享出來的鏈接點開是首頁問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開發(fā)中我們經(jīng)常會遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06
今天小編就為大家分享一篇vue 刷新之后 嵌套路由不變 重新渲染頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09