Vue页面渲染

398 阅读1分钟

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


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

<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>

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


原文作者:祈澈姑娘