vue implements dynamic data mainly by vue resource and axios. However, vue resource has not been updated since vue 2.0. Therefore, this paper mainly uses axios to operate.

1. Install axios

npm install axios --save

2. Writing components in components of Vue cli

1. <span style="font-size:14px;"><template>  
2.   <div class="count">  
3.     <table cellspacing="0" border="1px">  
4.       <tr>  
5.         <th>id</th>  
6.         <th>name</th>  
7.         <th>age</th>  
8.         <th>intro</th>  
9.       </tr>  
10.       <tr v-for="user in users">  
11.         <td>{{user.id}}</td>  
12.         <td>{{user.name}}</td>  
13.         <td>{{user.age}}</td>  
14.         <td>{{user.intro}}</td>  
15.       </tr>  
16.     </table>  
17.   </div>  
18. </template>  
19.   
20. <script>  
21. import Vuex from "vuex";  
22. import axios from "axios";  
23.   
24.   export default{  
25.     name:'count',  
26.     data(){  
27.       return{  
28.         users: []//Create an array in advance to store the requested data
29.       }  
30.     },  
31.     created(){ //Using created here is equivalent to initializing the front-end page data
32.       axios.get("http://XXXX / Axios. php "). Then (RES = >
33.         this.users=res.data;//Get data
34.         console.log('success');  
35.         console.log(this.users);  
36.       })  
37.     }  
38.   }  
39. </script>  
40.   
41. <style scoped>  
42.   table{  
43.     width:600px;   
44.     height:300px;   
45.     margin:100px  
46.   }  
47. </style></span>  

3. Database creation

The data table information created in this paper mainly consists of id, user, name and intro

You can create your own according to your own needs. There are many specific creation methods on the Internet, which will not be described in detail here. The data created is as follows:

4. Required php

1. <span style="font-size:14px;"><?php  
2.     header("Access-Control-Allow-Origin: *");//This must be written, or it will be reported as wrong  
3.     $mysqli=new mysqli('localhost','root','passwd','table');//Fill in according to your own database  
4.   
5.     $sql="select * from users";  
6.     $res=$mysqli->query($sql);  
7.   
8.     $arr=array();  
9.     while ($row=$res->fetch_assoc()) {  
10.         $arr[]=$row;  
11.     }  
12.     $res->free();  
13.     //Close connection  
14.     $mysqli->close();  
15.       
16.     echo(json_encode($arr));//echo instead of return  
17.   
18. ?></span>  

The final output on the liquid level is also shown in the figure in the data sheet above.