Vue通过接口获取数据在列表展示

1、引入JS

<!--bootstrap-->
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue-resource-->
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>

2、列表

<div id="app">
	<table class="table table-bordered table-hover table-striped">
	    <thead>
	        <tr>
	            <td>ID</td>
	            <td>名称</td>
	            <td>时间</td>
	            <td>操作</td>
	        </tr>
	    </thead>
	    <tbody>
	        <tr v-for="item in list" :key="item.id">
	            <td>{{ item.id }}</td>
	            <td v-text="item.name"></td>
	            <td>{{ item.ctime }}</td>
	            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
	        </tr>
	    </tbody>
	</table>
</div>

3、接口信息

URL：http://***/bing/getprodinfo
示例：
{
    "status": 0,
    "message": [
        {
            "id": 1,
            "name": "奥迪",
            "ctime": "2020-04-20T10:32:07.000Z"
        },
        {
            "id": 2,
            "name": "宝马",
            "ctime": "2020-04-21T10:32:07.000Z"
        }
    ]
}

4、请求接口数据

var vm=new Vue({
    el:'#app',
    data:{
        list:[
        ]
    },
    created(){
        this.getAllList()
    },
    methods:{
        getAllList(){
            this.$http
                .get('http://***/bing/getprodinfo')
                .then(result=>{
                    var json=result.body;
                    if(json.status===0){
                        this.list = json.message
                    }
                    else{
                        alert('获取数据失败')
                    }
                })
		}
    }
})