VueJs使用Amaze ui调整列表和内容页面(2)

日期：2020-05-11 栏目：程序人生 浏览：次

注意：上面我们初始化查询第一页的数据，并规定每页显示10条，我们没有做分页功能的开发。是由于cnodejs.org的api并没有给我们返回分页的信息，将来如果是实际开发，那么接口正常情况是会返回分页信息的，我们到时候再具体的渲染就好了。

调整内容页面

打开/src/pages/Content.vue，代码如下：

<template>
<div class="admin-content">
  <h2 v-text="article.title"></h2>
  <p>作者：{{article.author.loginname}}　　发表于：{{article.create_at}}</p>
  <hr>
  <article v-html="article.content"></article>
  <h3>网友回复：</h3>
  <ul>
   <li v-for="i in article.replies">
    <p>评论者：{{i.author.loginname}}　　评论于：{{i.create_at}}</p>
    <article v-html="i.content"></article>
   </li>
  </ul>
 </div>
</template>
<script>
 export default {
  name : "Content",
  data () {
   return {
    id: this.$route.params.id,
    article: {
     author: {
      loginname:""
     }
    }
   }
  },
  created () {
   this.getData();
  },
  mounted () {
   $(".admin-content").css("height",(document.documentElement.clientHeight-36-50)+"px");
  },
  methods: {
   getData () {
    this.$api.get('topic/' + this.id, null, r => {
     console.log(r.data);
     this.article = r.data;
    })
   }
  }
 }
</script>

到此为止我们就完成了列表页面和内容页面的整合了，说明一下在调整后的script中，多了个mounted 方法，这个是vuejs的勾子函数，我理解的意思表示元素已经创建，数据也渲染完成。我们来设置admin-content的高度就没有问题了，不过这个我不确定是我的写法有问题，还是Amaze ui和vuejs整合后的影响，目前只能这样解决了。

最终效果

列表页面：

内容页面：

总结

以上所述是小编给大家介绍的VueJs使用Amaze ui调整列表和内容页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持！