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 相关文章推荐
判断文件是否正在被使用的JS代码
Dec 21 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JS实现瀑布流布局
Oct 21 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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
PHP 压缩文件夹的类代码
2009/11/05 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js post提交调用方法
2014/02/12 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
python读写二进制文件的方法
2015/05/09 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
学前教育求职自荐信范文
2013/12/25 职场文书
骨干教师培训制度
2014/01/13 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
《学棋》教后反思
2014/04/14 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
2015年手术室工作总结
2015/05/11 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL