Vue.js Ajax动态参数与列表显示实现方法
Vue.js简介
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
一、动态参数显示
ajax异步请求后，接收到返回的data参数并显示在前端
1.1引入js，也加入了jQuery
<scripttype="text/javascript"src="/js/vue.min.js"></script> <scripttype="text/javascript"src="/js/jquery-2.1.3.js"></script>
1.2html
<divid="app">
<p>{{message}}</p>
<buttonv-on:click="showData">显示数据</button>
</div>
1.3JS
注意：这里JS一定要放在$(function(){})里面，或者是写到body里面
newVue({
el:'#app',
data:{
message:''
},
methods:{
showData:function(){
var_self=this;
$.ajax({
type:'GET',
url:'...',
success:function(data){
_self.message=JSON.stringify(data);
}
});
}
}
})
二、动态列表显示
开始展示一个空白列表，ajax异步请求后，接收到返回的data列表信息并显示
2.1引入js，也加入了jquery
<scripttype="text/javascript"src="/js/vue.min.js"></script> <scripttype="text/javascript"src="/js/jquery-2.1.3.js"></script>
2.2html
<divid="app">
<table>
<thead>
<tr>
<thstyle='width:3%;text-align:left'>ID</th>
<thstyle='width:5%;text-align:left'>名称</th>
<thstyle='width:10%;text-align:left'>条形码</th>
<thstyle='width:10%;text-align:left'>简称</th>
</tr>
</thead>
<tbody>
<trv-for="goodsingoodsList">
<td>{{goods.id}}</td>
<td>{{goods.name}}</td>
<td>{{goods.barcode}}</td>
<td>{{goods.shortName}}</td>
</tr>
</tbody>
</table>
<buttonv-on:click="nameSearch()">查询</button><br><br>
</div>
2.3JS
vargoodsVue=newVue({
el:'#app',
data:{
goodsList:''
},
methods:{
nameSearch:function(){
var_self=this;
$.ajax({
type:'GET',
url:'...',
success:function(data){
_self.goodsList=data;
}
});
}
}
})
以上所述是小编给大家介绍的Vue.jsAjax动态参数与列表显示实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！