vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能示例
更新時(shí)間：2019年08月03日 09:36:38 作者：TANKING-
這篇文章主要介紹了vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能,結(jié)合實(shí)例形式分析了vue.js針對(duì)本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能。分享給大家供大家參考，具體如下：
1、首先通過(guò)json.php把數(shù)據(jù)庫(kù)給輸出為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"
}
]
然后通過(guò)vue.js來(lái)解析
<!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>資源名稱(chēng)</td>
<td>LOGO</td>
<td>更新時(shí)間</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" >點(diǎn)擊下載</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>
最終運(yùn)行index.html
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue proxyTable的跨域中pathRewrite配置方式
這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue.js動(dòng)態(tài)組件和插槽的使用匯總，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
watch里面的deep和immediate作用及說(shuō)明
這篇文章主要介紹了watch里面的deep和immediate作用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
VUE項(xiàng)目啟動(dòng)沒(méi)有問(wèn)題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注
這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目啟動(dòng)沒(méi)有問(wèn)題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注的相關(guān)資料,文中將遇到的問(wèn)題以及解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
webpack項(xiàng)目中使用vite加速的兼容模式詳解
這篇文章主要為大家介紹了webpack項(xiàng)目中使用vite加速的兼容模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue使用i18n實(shí)現(xiàn)國(guó)際化的方法詳解
這篇文章主要給大家介紹了關(guān)于vue使用i18n如何實(shí)現(xiàn)國(guó)際化的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue開(kāi)發(fā)中常見(jiàn)的套路和技巧總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)中常見(jiàn)的套路和技巧的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue與TypeScript的結(jié)合使得開(kāi)發(fā)大型應(yīng)用變得更加容易和高效,本文將詳細(xì)探討Vue.js組件中TypeScript的應(yīng)用,特別是它的生命周期鉤子函數(shù),并通過(guò)豐富的示例,為你提供一個(gè)實(shí)戰(zhàn)指南,需要的朋友可以參考下2023-11-11