Vue.js Ajax dynamic parameters and list display implementation method-PHP开发-php.cn

Home

php教程

PHP开发

Vue.js Ajax dynamic parameters and list display implementation method

高洛峰

Dec 09, 2016 pm 03:18 PM

Introduction to Vue.js

vue means view in French. Vue.js is a lightweight, high-performance, componentable MVVM library, and has a very easy-to-use API.

1. Dynamic parameter display

After asynchronous ajax request, the returned data parameters are received and displayed on the front end

1.1 introduced js and also added jQuery

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>

Copy after login

1.2 html

<div id="app">
<p>{{ message }}</p>
<button v-on:click="showData">显示数据</button>
</div>

Copy after login

1.3 JS

Note: The JS here must be placed inside $(function() {}), or written into the body

new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;&#39;
},
methods: {
showData: function () {
var _self = this;
$.ajax({
type: &#39;GET&#39;,
url: &#39;...&#39;,
success:function(data) {
_self.message = JSON.stringify(data);
}
});
}
}
})

Copy after login

2. Dynamic list display

Start to display a blank list, ajax asynchronous After the request, the returned data list information is received and displayed

2.1 introduced js, also added jquery

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>

Copy after login

2.2 html

<div id="app">
<table>
<thead>
<tr>
<th style=&#39;width:3%; text-align: left&#39;>ID</th>
<th style=&#39;width:5%; text-align: left&#39;>名称</th>
<th style=&#39;width:10%; text-align: left&#39;>条形码</th>
<th style=&#39;width:10%; text-align: left&#39;>简称</th>
</tr>
</thead>
<tbody>
<tr v-for="goods in goodsList">
<td>{{goods.id}}</td>
<td>{{goods.name}}</td>
<td>{{goods.barcode}}</td>
<td>{{goods.shortName}}</td>
</tr>
</tbody>
</table>
<button v-on:click="nameSearch()">查询</button><br><br>
</div>

Copy after login

2.3 JS

var goodsVue = new Vue({
el: &#39;#app&#39;,
data: {
goodsList : &#39;&#39;
},
methods: {
nameSearch: function () {
var _self = this;
$.ajax({
type: &#39;GET&#39;,
url: &#39;...&#39;,
success:function(data) {
_self.goodsList = data;
}
});
}
}
})

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn