vue简学之路（案例四）生命周期及过滤器的简单运用

最新推荐文章于 2021-08-20 12:49:34 发布

健身小白

最新推荐文章于 2021-08-20 12:49:34 发布

阅读量117

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44014971/article/details/103839159

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载评论功能</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>
    使用请求“评论列表”
    解析列表
    展示列表
    利用生命周期“完成显示”
</h1>
<div id="app">
    <button @click="loaddata()">点击加载评论</button>
    <ul>
        <li v-for="item in arr">
            <h4>{{item.commentTxt}}</h4>
            <p>{{item.createAt | time}}</p>
        </li>
    </ul>

</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            arr:[]
        },
        filters: {
          time:function(val){
              return val.substring(0,10)
          },
        },
        methods:{
            loaddata:function () {
                //发送请求，得到数据，解析数据
                axios.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then(res=>{
                    console.log(res.data.data.commentList)
                    this.arr=res.data.data.commentList
                })

            }
        },
    })
</script>

</body>
</html>