VUE中通过HTTP取得JSON信息后，赋值表格数据

源码资源网

VUE中通过HTTP取得JSON信息后，赋值表格数据
在 Vue.js 中通过 HTTP 请求获取 JSON 数据后，将数据赋值给表格并使用中文显示，您可以使用 Vue.js 的数据绑定功能和中文数据来实现这一功能。以下是一个简单的示例代码，演示如何在 Vue.js 中获取 JSON 数据并在表格中使用中文显示：
1. 在 Vue.js 组件中使用 Axios 或 Fetch API 发起 HTTP 请求获取 JSON 数据：
使用axios

1. npm install axios

复制代码

1. import axios from 'axios';
   
2. export default {
   
3.   data() {
   
4.     return {
   
5.       tableData: []
   
6.     };
   
7.   },
   
8.   mounted() {
   
9.     axios.get('https://api.example.com/data')
   
10.       .then(response => {
    
11.         this.tableData = response.data; // 假设返回的数据是一个包含中文字段的 JSON 数组
    
12.       })
    
13.       .catch(error => {
    
14.         console.error('Error fetching data:', error);
    
15.       });
    
16.   }
    
17. }

复制代码

2. 在模板中使用数据绑定显示表格数据，并确保中文字段能正确显示：

1. html
   
2. <table>
   
3.   <thead>
   
4.     <tr>
   
5.       <th>姓名</th>
   
6.       <th>年龄</th>
   
7.       <th>城市</th>
   
8.     </tr>
   
9.   </thead>
   
10.   <tbody>
    
11.     <tr v-for="item in tableData" :key="item.id">
    
12.       <td>{{ item.name }}</td>
    
13.       <td>{{ item.age }}</td>
    
14.       <td>{{ item.city }}</td>
    
15.     </tr>
    
16.   </tbody>
    
17. </table>

复制代码

在这个示例中，我们使用 Axios 发起 HTTP GET 请求来获取 JSON 数据，并将返回的数据赋值给  `tableData`  数组。然后，在模板中使用  `v-for`  指令遍历数据并显示在表格中，确保中文字段能正确显示。
请确保替换示例代码中的 URL 和字段名以匹配您的实际数据。这样，您就可以在 Vue.js 中通过 HTTP 请求获取 JSON 数据并在表格中使用中文显示。