Vue教程(组件-切换案例) - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

帝皇彩票官网蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


Vue教程(组件-切换案例)

2019-8-5 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

前面介绍了Vue中组件的创建方式和data及methods属性,本文我们来做一个Vue组件的切换案例,效果如下:

这个效果相信大家都能搞定,本文希望通过这个案例来加深下组件的使用,

Vue 组件切换案例
基础页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                
            }
        })
    </script>
</body>
</html>


一、通过v-if控制实现
首先我们通过前面介绍的v-if标签来实现下这种效果

1.创建组件
创建我们需要的两个全局组件,并通过标签使用。

<div id="app">

    <login></login>
    <register ></register>
</div>
<script>

    // 创建登录的组件
    Vue.component("login",{
        template: "<h3>这是一个登录LOGIN组件</h3>"
    })
    // 创建注册的组件
    Vue.component("register",{
        template: "<h3>这是一个注册组件</h3>"
    })

    var vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            
        }
    })
</script>

2.控制显示
添加链接标签,通过 v-if 和 v-else 标签来控制显示和隐藏,如下



效果



完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <!--注意: v-if v-else-if v-else 使用^_^ -->
        <login v-if="flag"></login>
        <register v-else></register>
    </div>
    <script>

        // 创建登录的组件
        Vue.component("login",{
            template: "<h3>这是一个登录LOGIN组件</h3>"
        })
        // 创建注册的组件
        Vue.component("register",{
            template: "<h3>这是一个注册组件</h3>"
        })
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {}
        })
    </script>
</body>
</html>

二、通过component标签来实现
除了上面介绍的这种方式以外我们还可以通过Vue组件中给我们提供的一个component标签来实现



Vue提供了 component 来展示对应名称的组件,component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称

效果



完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
            <a href="" @click.prevent="comName='login'">登录</a>
            <a href="" @click.prevent="comName='register'">注册</a>

            <component :is="comName"></component>
    </div>
    <script>

        // 创建登录的组件
        Vue.component("login",{
            template: "<h3>这是一个登录LOGIN组件</h3>"
        })
        // 创建注册的组件
        Vue.component("register",{
            template: "<h3>这是一个注册组件</h3>"
        })

        var vm = new Vue({
            el: "#app",
            data: {
                comName: "login"
            },
            methods: {

            }
        })
    </script>
</body>
</html>

35
36
37
38
39
组件切换-动画
前面我们介绍了 动画 的使用,那么刚好我们可以在切换的时候把动画效果给加上。
添加动画样式:

<style>
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateX(150px) ;
    }

    .v-enter-active,
    .v-leave-active{
        transition: all 1s ease;
    }
</style>

组件包裹 标签



效果



我们发现动画切换的时候两个是一块执行的,这时我们可以在 transition 标签添加一个 mode属性 来设置动画的模式



搞定~

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: Vue教程(组件-切换案例) « WEB端控件规范——导航类 | 标题文字如何处理更吸引人?»


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 2019年6月(59)
  5. 2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 帝皇彩票官网2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 2018年10月(29)
  13. 2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 帝皇彩票官网2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 2017年4月(51)
  25. 2017年3月(70)
  26. 帝皇彩票官网2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 2016年11月(111)
  30. 帝皇彩票官网2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 2015年10月(46)
  41. 2015年9月(43)
  42. 2015年8月(40)
  43. 2015年7月(33)
  44. 2015年6月(46)
  45. 帝皇彩票官网2015年5月(58)
  46. 帝皇彩票官网2015年4月(70)
  47. 2015年3月(55)
  48. 2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 2014年7月(13)
  56. 2014年6月(66)
  57. 2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 2013年6月(27)
  68. 2013年5月(48)
  69. 帝皇彩票官网2013年4月(39)
  70. 2013年3月(8)
  71. 2013年2月(20)
  72. 2013年1月(31)
  73. 2012年12月(33)
  74. 帝皇彩票官网2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 2012年5月(31)
  80. 帝皇彩票官网2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
桔子彩票网址 桔子彩票官网 状元彩票开奖 状元彩票官网 吉利彩票导航 博乐彩票计划群 浙江11选5 帝皇彩票 帝皇彩票官网 迪士尼彩乐园