美文网首页
测试之vuejs

测试之vuejs

作者: sunshime | 来源:发表于2016-09-05 16:28 被阅读0次

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

    图1

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

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

    左侧滚动条

    图2

    右侧滚动条

    图3 图4

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

    http://router.vuejs.org/

    相关文章

      网友评论

          本文标题:测试之vuejs

          本文链接:https://www.haomeiwen.com/subject/qjvrettx.html