Vue.js ajax Dynamic parameters and list display implementation method _javascript skills

Vue.js Introduction

Vue is the meaning of the French view, Vue.js is a lightweight, high-performance, modular MVVM Library with a very easy to access API.

One, dynamic parameter display

After the Ajax asynchronous request, the returned data parameter is received and displayed in the front-end

1.1 Introduced JS, also joined the jquery

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

1.2 HTML

<div id= "App" >
<p>{{message}}</p>
<button v-on:click= "ShowData" > Display data </button >
</div>

1.3 JS

Note: Here JS must be placed in the $ (function () {}), or written inside the body

New Vue ({
el: ' #app ',
data: {message
: '
},
methods: {
showdata:function () {
var _self = t his;
$.ajax ({
type: ' Get ',
URL: ' ... ',
success:function (data) {
_self.message = json.stringify (data);
}
});
}
}
})

Second, dynamic list display

Begin to show a blank list, Ajax asynchronous request, receive the returned data list information and display

2.1 Introduced JS, also joined the jquery

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

2.2 HTML

<div id= "App" >
<table>
<thead>
<tr>
<th style= ' width:3%: Left ' >ID</th>
<th style= ' width:5%; Text-align:left ' > Name </th>
<th style= ' width:10%; Text-align:left ' > Barcode </th>
<th style= ' width:10%; text-align:left ' > abbreviation </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 ()" > Query </button><br><br>
</div>

2.3 JS

var Goodsvue = new Vue ({
el: ' #app ',
data: {
goodslist: '
},
methods: {
namesearch:function () {
var _self = this;
$.ajax ({
type: ' Get ',
URL: ' ... ',
success:function (data) {
_self.goodslist = data;
}
);
}
}
})

The above is a small set to introduce the Vue.js Ajax dynamic parameters and list display implementation method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!