vue.js实现数据库的数据数据输出渲染到超文本标记语言页面功能示例

本文实例讲述了vue.js实现数据库的数据数据输出渲染到超文本标记语言页面功能。分享给大家供大家参考，具体如下：

1、首先通过json.php把数据库给输出为数据格式的数据

[ { 'id':1，' resname': '百度，resig ' : ' http://www .百度。com/1。jpg '，' resit ' : ' 2018-1-18 '，' resurl ' : ' http://www .百度。com/1。apk '，' pageview':'100' }，{ 'id':2，' resname': '阿里巴巴，resig ' : ' http://www .阿里巴巴。com/1。jpg '，' resit ' : ' 2018-1-18 '，' resurl ' : ' http://www .阿里巴巴。com/1。apk '，' pageview':'200' }，{ 'id':3，' resname': '腾讯，resig ' : ' http://www .QQ。com/1。jpg '，' resit ' : ' 2018-1-18 '，' resurl ' : ' http://www .QQ。com/1。apk '，' pageview':'300' }]然后通过vue.js来解析

！DOCTYPE html html lang=' zh-CN ' head title vue解析数据数据/title meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' script src=' http :https://cdn。bootcss。com/vue/2。2 .2/vue。量滴js '/script script src=' http :https://cdn。bootcss。com/jquery/3。2 .1/jquery。量滴js '/script/head dy div id='资源名称TD/TdLogo/Td更新时间运输署/运输署下载地址运输署/运输署阅读量/TD/tr v-for=' r in row ' TD { { r . id } }/TD { { r . resname } }/TD tdimg v-bind : src=' http : r . resi mg '/TD { { r . resit } }/TD TDA v-bind : href=' r . resurl ' rel='外部无跟随'点击下载/a/TD/TD { { r . page view } }/TD/tr/table/div/body script $(文档)。ready(function () { $).getJSON('data.json '，function (result，status){ var v=new Vue({ El : ' # main '，data : { row 3360 result } })})；});/script/html最终运行index.html

希望本文所述对大家vue.js程序设计有所帮助。