Examples are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/"></script>
<script src="/"></script>
<style>
#th th{
background-color: #50a9fa;
color: aliceblue;
font-size: large;
}
</style>
</head>
<body >
<div align="center">
<input type="text" v-model="id">
<input type="text" v-model="pname">
<button @click="addData">Add data</button>
<table border="1"solid width="400px">
<tr>
<th>serial number</th>
<th>name</th>
<th>time</th>
<th>operate</th>
</tr>
<tr v-for="item in list ">
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
<td>
<a href="javascript:void(0)" rel="external nofollow" >delete</a>
</td>
</tr>
</table>
</div>
<script>
//The life cycle of vue
new Vue({
el:'#app',
data:{
list:[]
},
//This method will be automatically called after the vue object instance is created successfully //If the method you want to write is called when it is comfortable, you must use created created:function () {
();//Define this method here, and after running the vue instance, call this function },
methods:{
getlist:function () {
//Request the server's API to get the brand's data list this.$('/api/getprodlist').then(function (response) {
//Tips for handling server exception information if(!=0)
{
alert();
return ;
}
//Processing normal logical data processing =;
});
}
}
});
</script>
</body>
</html>
The above example of Vue using ajax to obtain backend data for display is all the content I share with you. I hope you can give you a reference and I hope you can support me more.