vue.js展示AJAX数据简单示例

迷南。 2022-04-06 01:40 249阅读 0赞

最近琢磨了一下vue.js，并在项目中进行了运用，感觉非常好用，强烈推荐。  
　　当通过AJAX方式取回数据后，使用vue.js可以完美地按一定逻辑在页面上的展示数据，代码简单、优美、自然，而且便于与在用的页面框架集成。  
　　感谢vue.js的作者，官方网站地址：https://cn.vuejs.org  
  
　　举个小例子。注意，代码中使用jQuery、bootstrap。没有用过bootstrap不影响阅读本文。  
  
\[b\]一、返回的JSON数据示例\[/b\]

[
    {"playid":"12113c676a4e4aefac75d793910ea193",
    "playname":"新建活动",
    "startDate":"2017-01-01",
    "guestNum":2,
    "nickname":"wallimn",
    "blog":"http://wallimn.iteye.com"}
    ]

\[b\]二、网页代码\[/b\]

<table class="table table-bordered table-striped table-condensed" id="recentPlayTable">
    	<tr>
    		<th>名称</th><th>时间</th><th>人数</th>
    	</tr>
    	<tr v-if="loaded==false">
    		<td colspan="3" class="text-center">正在加载数据......</td>
    	</tr>
    	<tr v-else-if="items.length==0">
    		<td colspan="3" class="text-center">暂无数据</td>
    	</tr>
    	<template v-else>
    	<tr v-for="item in items">
    		<td>{
       {item.playname}}</td>
    		<td>{
       {item.startDate}}</td>
    		<td>{
       {item.guestNum}}</td>
    	</tr>
    	</template>
    </table>
    <script type="text/javascript">
    	var playTableVue = new Vue({
       
    		el:"#recentPlayTable",
    		data:{
       
    			items:[],
    			loaded:false
    		}
    	});
    	$(function (){
       
    		$.getJSON("JSON",{playid:'${play.playid}'},function(json){
       
    			if(!json)json=[];
    			playTableVue.items=json;
    			playTableVue.loaded=true;
    		});
    	});
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX请求示例

$.ajax({ url: "", //请求地址 type: 'POST',

雨点打透心脏的1/2处/ 2024年04月01日 14:47/ 0 赞/ 36 阅读

相关 Canvas 实现进度条展示统计数据示例

canvas可以画柱状图，如下就是一个例子，主要用到了lineWidth，beginPath，lineCap等知识点。效果图 ![在这里插入图片描述][6585907

梦里梦外;/ 2024年02月20日 12:37/ 0 赞/ 14 阅读

相关 jQuery简单的Ajax调用示例

jQuery确实方便，下面做个简单的Ajax调用：建立一个简单的HTML文件： <!DOCTYPE HTML> <html> <head>

以你之姓@/ 2023年10月18日 10:19/ 0 赞/ 70 阅读

相关 laravel和vuejs第一个最简单的示例hello Vuejs

纯laravel和vuejs：第一个最简单的示例如果你到网上搜索laravel+vuejs，大部分情况下你会得到一堆如何用nodejs，webpack, babel,

淩亂°似流年/ 2022年06月03日 04:09/ 0 赞/ 188 阅读

相关 ssm （通过ajax展示数据）日期格式化相关问题

第一种方式：实体类加入 @DateTimeFormat(pattern = "yyyy-MM-dd") @JsonFormat(pattern = "yyyy-MM-

亦凉/ 2022年04月11日 10:43/ 0 赞/ 269 阅读

相关 ajax示例

超级麻烦的党梁写法： function getBookList(currentPage){ var qbookName = $("qbookName").v

朴灿烈づ我的快乐病毒、/ 2022年04月10日 04:15/ 0 赞/ 228 阅读

相关 vue.js展示AJAX数据简单示例

　　最近琢磨了一下vue.js，并在项目中进行了运用，感觉非常好用，强烈推荐。　　当通过AJAX方式取回数据后，使用vue.js可以完美地按一定逻辑在页面上的展示数据，代

迷南。/ 2022年04月06日 01:40/ 0 赞/ 250 阅读

相关 AJAX简单示例——实现检测用户名是否可用

环境 MyEclipse 8.6 + JDK 1.6 + Tomcat 6.0 问题 AJAX简单示例——实现检测用户名是否可用。说明：本文没有涉及数据库，

快来打我*/ 2022年03月27日 05:46/ 0 赞/ 170 阅读

相关 VueJS ajax综合案例

一、目录结构和注意事项 1.目录结构 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

- 日理万妓/ 2022年01月22日 03:39/ 0 赞/ 256 阅读

相关【Vue 学习】- VueJS 简单入门

目录一、概述 1、Vue 介绍 2、MVVM 模式二、Vue 入门 1、使用 IDEA 开发 Vue 2、插值表达式 --------------------

末蓝、/ 2021年09月21日 00:52/ 0 赞/ 725 阅读