VueJs怎么使用Amazeui调整列表和内容页面

这篇文章给大家分享的是有关VueJs怎么使用Amaze ui调整列表和内容页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

碑林网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联公司2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

制作左侧菜单

一个后台管理系统,大致的样式都是分为南北东西的,而西(也就是左侧)一般是我们的菜单。如图:

VueJs怎么使用Amaze ui调整列表和内容页面

我们今天就来把我们的项目完成到如上图的样式,首先我们来制作左侧的菜单,在/src/components/下新建menu.vue。代码如下:


现在我们的菜单就已经做好了,只需要将菜单应用到我们的项目中就可以了。打开/src/App.vue,修改如下位置:

VueJs怎么使用Amaze ui调整列表和内容页面

调整列表页面

打开/src/pages/Index.vue代码如下:


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

调整内容页面

打开/src/pages/Content.vue,代码如下:


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

最终效果

列表页面:

VueJs怎么使用Amaze ui调整列表和内容页面

内容页面:

VueJs怎么使用Amaze ui调整列表和内容页面

感谢各位的阅读!关于“VueJs怎么使用Amaze ui调整列表和内容页面”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前题目:VueJs怎么使用Amazeui调整列表和内容页面
分享链接:http://scyanting.com/article/gdship.html