如何将mysql的数据库渲染到页面_vue.js实现数据库的JSON数据输出渲染到html页面功能示例...

本文实例讲述了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来解析

VUE解析JSON数据
ID资源名称LOGO更新时间下载地址阅读量
{{r.id}}{{r.resname}}{{r.resint}}点击下载{{r.pageview}}

$(document).ready(function () {

$.getJSON("data.json", function (result, status) {

var v = new Vue({

el: '#main',

data: {

rows: result

}

})

});

});

最终运行index.html

e692d6b6955614fdec627e9da5f26db6.png

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/442595.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java模块_Java 9 揭秘(2. 模块化系统)

文 by / 林本托Tips做一个终身学习的人。在此章节中,主要介绍以下内容:在JDK 9之前Java源代码用于编写,打包和部署的方式以及该方法的潜在问题JDK 9中有哪些模块如何声明模块及其依赖关系如何封装模块什么是模块路径什么是可观察的模块如何打…

java swing滚动面板_java swing 之 JScrollPane(滚动面板)的使用

/*** java swing 之JScrollPane面板* 在设置界面时,可能会遇到在一个较小的容器窗体中显示一个较大部分的内容,这时可以使用* JScrollPane面板,JscrollPane面板是带滚动条的面板,也是一种容器,但是常用于布置单个* 控件…

java reader_Java之字符输入流,Reader类的简单介绍

各位小伙伴们大家好,在之前的文章中,小编介绍了Java之文件复制的简单介绍,多是一些关于字节的知识,这次小编要介绍的是字符输入流Reader类,具体如下:java.io.Reader:字符输入流,是字符输入流的最…

java object 转byte_Java将对象Object转换成Byte字节数组

Java将对象Object转换成Byte字节数组的代码如下:/*** from www.ityuan.com* Description: Java将对象Object转换成Byte字节数组*/public class ObjectToByteTester implements Serializable {private static final long serialVersionUID 932872837809539736L;publ…

java redis brpop_Redis实战 | 5种Redis数据类型详解

我们知道Redis是目前非常主流的KV数据库,它因高性能的读写能力而著称,其实还有另外一个优势,就是Redis提供了更加丰富的数据类型,这使得Redis有着更加广泛的使用场景。那Redis提供给用户的有哪些数据类型呢?主要有&…

java二分查找递归_java学习之—递归实现二分查找法

/*** 递归实现二分查找法* Create by Administrator* 2018/6/21 0021* 上午 11:25**/class OrdArray{private long[] a;private int nElems;public OrdArray(int max){this.a new long[max];this.nElems 0;}public int size(){return nElems;}public long find(long searchKe…

java 抽象类对象_Java基础___面向对象__抽象类

抽象类在面向对象的概念中,所以的对象都是通过类来描绘的,但是反过来,并不是多余类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类。抽象类除了不能实例化对象之外&#…

java 对象克隆_JAVA对象克隆

1> 为了获取对象的一份拷贝,我们可以利用Object类的clone()方法。2> 在派生类中覆盖基类的clone(),并声明为public。3> 在派生类的clone()方法中,调用super.clone()。4> 在派生类中实现Cloneable接口。4> 没有抽象方法的接口叫…

产生随机数java_java产生随机数的几种方式

一.在j2se里我们可以使用Math.random()方法来产生一个随机数,这个产生的随机数是0-1之间的一个double,我们可以把他乘以一定的数,比如说乘以100,他就是个100以内的随机,这个在j2me中没有。二.在java.util这个包里面提供…

java 线程 单例_多线程单例模式

多线程单例模式原文:https://blog.csdn.net/u011726005/article/details/823565381. 饿汉模式使用饿汉模式实现单例是十分简单的,并且有效避免了线程安全问题,因为将该单例对象定义为static变量,程序启动即将其构造完成了。代码实…

java 中文 编译_java编译带中文是显示乱码的错误

FirstJava.java:3: 错误: 编码GBK的不可映射字符System.out.println("娆㈣繋瀛︿範Java绋嬪簭锛?")锛?^FirstJava.java:3: 错误: 编码GBK的不可映射字符System.out.println("娆㈣繋瀛︿範Java绋嬪簭锛?")锛?^FirstJava.java:4: 错误: 编码GBK的不可映射…

java 中间件 pdf_Java中间件技术及其应用开发 PDF扫描版[51MB]

Java中间件技术及其应用开发 内容提要:本书使用丰富的案例介绍了使用Java技术进行中间件编程的方法及技巧,包括JSP、JavaServlet、JDBC数据库开发、使用JavaMail开发邮件应用程序、RMI(远程方法调用)、EnterpriseJavaBeans开发、使用CORBA以及JavaIDL进行…

java千万用户实现实时排名_想知道谁是你的最佳用户?基于Redis实现排行榜周期榜与最近N期榜...

本文由云社区发表前言业务已基于Redis实现了一个高可用的排行榜服务,长期以来相安无事。有一天,产品说:我要一个按周排名的排行榜,以反映本周内用户的活跃情况。于是周榜(按周重置更新的榜单)诞生了。为了满足产品多变的需求&…

java循环左一_左旋转字符串(Java)-循环Index方式

左旋转字符串(Java)-循环Index方式题目要求​ 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果。对于一个给定的字符序列S,请你把其循环左移K位后的序列输出。例如,字符序列S”…

java jna jni_JNA, Java Native开发利器

下面的文章由转载而来,java与c的调用基本思路是这样子,但是结合我的使用经验,在使用jna和jnative的时候需要考虑到jdk的版本,jnative跟jdk1.4的结合可能会有点问题,因为我之前选的是jnative,而我们的jdk版本…

java枚举类型高级用法_枚举及其高级用法

Enum源码:Enum.java/** Copyright (c) 2003, 2009, Oracle and/or its affiliates. All rights reserved.* ORACLE PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.*/packagejava.lang;importjava.io.Serializable;importjava.io.IOException;importja…

java 解析http返回的xml_Java解析调用webservice服务的返回XML串详解

本文由Markdown语法编辑器编辑完成。1. 需求分析;已知当在调用某一webservice的服务时,如果调用成功,会接受到该服务的返回XML串。后端在获取了该XML原始串时,需要进行解析,将其解析为JSON格式,以便于发送到…

java车次信息_从火车站车次公示栏来学Java读写锁

Java多线程并发之读写锁本文主要内容:读写锁的理论;通过生活中例子来理解读写锁;读写锁的代码演示;读写锁总结。通过理论(总结)-例子-代码-然后再次总结,这四个步骤来让大家对读写锁的深刻理解。本篇是《凯哥(凯哥Java…

java构建xml参数_Java中使用XML创建EMAIL模板

邮件模板让我们来看看邮件模板的格式。模板是XML文件,它包含一个根元素和一系列根的子元素。根元素是。必要的子元素是, , 和 。可选的子元素是 , , 和 。如果你使用过邮件系统,那么你可以推导出这些元素实际包含的内容。可选的元素有多个实例&#xff0…

java 多目录 编译jar_javac编译多个包下的、依赖其他jar包的java文件

问题:多个*.java文件编译*.java文件依赖其他的jar包如下文件结构:F:\jar_prachild--child01--MyChild.java--child02--MyChild.javaparent--MyParent.javaMyParent.javapackage parent;public class MyParent{public void show(){System.out.println(&qu…