Vue obtains data through ajax

created()
When the data and methods of the
vm instance are initialized, the vm instance will passively execute the created life cycle function

status, message from the background

<div class="table-responsive" id="app">
    <table class="table">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in list" :key = "item.id">
            <td>{
    
    {
    
    item.id}}</td>
            <td>{
    
    {
    
    item.name}}</td>
            <td>{
    
    {
    
    item.ctime}}</td>
            <td>
                <a href="">删除</a>
            </td>
        </tr>
    </table>
</div>
<script>
    new Vue({
    
    
        el: '#app',
        data: {
    
    
            list: [
                {
    
    id: 1, name: 'aa', ctime: new Date()},
            ]
        },
        created() {
    
    
            this.getAllList()
        },
        methods: {
    
    
            getAllList() {
    
    
                this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then(result => {
    
    
                    var result = result.body
                    if(result.status === 0){
    
    
                    	//覆盖list中的数据
                        this.list = result.message
                    }else {
    
    
                        alert('获取数据失败!')
                    }
                })
            }
        }
    })
</script>

Guess you like

Origin blog.csdn.net/qq_42048638/article/details/102821047