测试之vuejs

用vuejs 构建一个单页面应用,单页面应用页面包括,头部,左侧导航,中间内容区域,如图1所示:


图1

要求:1.当左侧导航栏列表过多的时候,出现滚动条,右侧内容超出的时候右侧出现滚动条。如图2,3所示,点击左侧列表的时候,右边内容变成左侧菜单的字,如点击“左侧1”,右侧中间布局就变成“这是左侧1”,并且相应点击的li加上背景颜色,如图4所示:

注意事项:1左侧和中间布局高度默认跟浏览器窗口的高度一样,超出的时候才出现滚动条。2.点击左侧列表,通过路由来加载不同的组件。


左侧滚动条

图2

右侧滚动条


图3


图4

参考资料:https://vuejs.org/

http://router.vuejs.org/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容