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

迷南。 2022-04-06 01:40 287阅读 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>