vue.js实现数据库的JSON数据输出渲染到html页面功能示例


Posted in Javascript onAugust 03, 2019

本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能。分享给大家供大家参考,具体如下:

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

[
  {
    "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数据</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实现数据库的JSON数据输出渲染到html页面功能示例

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

Javascript 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
vue.js路由跳转详解
Aug 28 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
小程序中英文混合排序问题解决
Aug 02 #Javascript
详解JWT token心得与使用实例
Aug 02 #Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 #Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 #Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 #Javascript
超轻量级的js时间库miment使用解析
Aug 02 #Javascript
You might like
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JS实现点击下载的小例子
2013/07/10 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
python django 访问静态文件出现404或500错误
2017/01/20 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
python3判断IP地址的方法
2021/03/04 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
篝火晚会主持词
2014/03/25 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android