Vue框架Element UI教程-页面渲染（八）

王小婷

发布于 2025-05-18 18:38:36

7100

代码可运行

运行总次数：0

代码可运行

写了那么多，最终的数据都是要展示在前端的界面，才算是完成工作。 Element UI手册：https://cloud.tencent.com/developer/doc/1270 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element

其实步骤很简单，代码如下

<template>
    <div id="app">
  <div v-for="item in itemList">
    <span>{{item.name}}</span>
    <span>{{item.nick}}</span>
  </div>
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('http://localhost:8080/api/test').then(response => {
                    console.log(response.data);
                    
                   this.itemList =response.data.first;
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

打开界面，既可以看到，所需要的数据一家展示在前端的界面了