vue使用ajax获取后台数据进行显示

最新推荐文章于 2024-03-01 08:00:00 发布

后端切图仔

最新推荐文章于 2024-03-01 08:00:00 发布

阅读量2.4w

点赞数 4

分类专栏：第一次

本文链接：https://blog.csdn.net/weixin_40593587/article/details/79249152

版权

第一次专栏收录该内容

116 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/vue.min.js"></script>
    <script src="/vue-resource.min.js"></script>
    <style>
        #th th{
            background-color: #50a9fa;
            color: aliceblue;
            font-size: large;
        }
    </style>
</head>
<body >
<div id="app" align="center">
    <input type="text" v-model="id">
    <input type="text" v-model="pname">
    <button @click="addData">添加数据</button>
    <table id="th" border="1"solid width="400px">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in list ">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td>
                <a href="javascript:void(0)" >删除</a>
            </td>
        </tr>
    </table>
</div>
<script>
    //vue的生命周期
    
    new Vue({
       el:'#app',
        data:{
           list:[]
        },
        //vue对象实例创建成功之后就会自动调用这个方法
        //如果你想写的方法在舒适化的时候就被调用的话就要要用到created这个
        created:function () {
          this.getlist();//这里定义这个方法，vue实例之后运行到这里就调用这个函数
        },
        methods:{
            getlist:function () {
                //请求服务器的api获取到品牌的数据列表
                this.$http.get('http://vueapi.ittun.com/api/getprodlist').then(function (response) {
                    //处理服务器异常信息提示
                    if(response.body.status!=0)
                    {
                        alert(response.body.message);
                        return ;
                    }
                    //处理正常的逻辑数据处理
                    this.list=response.body.message;
                    
                });
                

            }
            
        }
    });
</script>
</body>
</html>

后端切图仔

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
vue使用ajax获取后台数据进行显示

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="/vue.min.js">script> script src="/vue-resource.min.js">script> style> #th th{ ba
复制链接

扫一扫