Vue 实现 Tab切换实现的场景很多,比如,利用vue-router、利用第三方插件、利用组件等等.

我用的是组件,为什么不用路由,有3个原因:

  • 1、因为我认为使用路由,再切换tab的时候,路劲地址是变化的,比如:/#/home、/#/app等等,这样做==Native hybrid==的同学就会发愁了,尤其是返回按钮,需要设置历史数据,我个人觉得太麻烦!

  • 2、根据需求出发。

  • 3、技术太low。

综上所述,上面已经介绍完我为什么要使用组件了

index.html文件

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>component</title>
        <style type="text/css">*{padding:0;margin:0}#app{width:500px;height:300px;margin:0 auto;background-color:#ddd}.top{height:50px;line-height:50px;width:100%;background-color:#999}.top ul li{display:inline-block;margin:0 10px}.top ul li a{text-decoration:none;color:white}</style>
    </head>

    <body>
        <div id="app">
            <div class="top">
                <ul>
                    <li @click='tabToggle("tab01");'>Tab001</li>
                    <li @click='tabToggle("tab02");'>Tab002</li>
                </ul>
            </div>
            <div>
                <component :is='currentView' keep-alive></component>
            </div>
        </div>
    </body>
    <script type="text/javascript" src='vue.min.js'>
    </script>
    <script>
        var tab01 = Vue.extend({
            template: '<p>This is tab01</p>'
        })

        var tab02 = Vue.extend({
            template: '<p>This is tab02</p>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                currentView: 'tab01'
            },
            components: {
                tab01: tab01,
                tab02: tab02
            },
            methods: {
                tabToggle: function(tabText) {
                    this.currentView = tabText
                }
            }
        })
    </script>

</html>

ok,完事儿了!

接下来,说说我遇到的问题,如果上面能满足你的问题,则不需要看下面

当然,我不可能只是简简单单的一个页面,一个小demo,如果要应用到项目中,又是另一回事儿。

问题1:

例如:在 .vue文件中

这里写图片描述

反反复复,这是什么造成的,对于新手来说,一个不经意间,就造成了,

原因在于data,vue规定,data是一个函数,我这里写成了对象:

这里写图片描述

==应修改为:==

这里写图片描述

问题2:

查半天资料没查出个所以然来,那个纠结啊,群里各种找大神啊

这里写图片描述

太闹心,以为是 自己写的组件的问题,各种改,改半天,没任何效果,后来抱着试试的心态,在页面上加了个变量,发现,压根就不起效果,

this.变量名 = "Hello"

页面没有任何反应,以为是vue版本太高了,不支持,算了,不闲扯了,谁做谁知道!

问题的原因在于:加了一个不存在的方法

这里写图片描述

得,把它删除掉就可以了,其他就不介绍了,完成了。OK了!


Logo

前往低代码交流专区

更多推荐