• 技术文章 >web前端 >Vue.js

    vue中怎么实现点击切换页面

    藏色散人藏色散人2022-11-19 16:49:46原创423

    vue实现点击切换页面的方法:1、注册一个组件,并在父元素中使用;2、使用v-if和v-else来控制页面的显示与隐藏;3、给两个按钮绑定事件,并控制v-if值的更改;4、自定义事件,将父元素的值传给子元素,用来显示到页面上,从而更好显示页面的切换效果。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、vue3、Dell G3电脑。

    vue中怎么实现点击切换页面?

    Vue案例--点击按钮切换页面

    用vue的方式做一个切换页面的效果。

    思路:

    父组件代码:

    <template>
        <div>
            <div className="boxs">
                <Page v-if="isShow" :pa="info1" style="background-color: lightpink;width: 200px; height:200px;"></Page>
                <Page v-else id="soecnd" :pa="info2"  style="background-color: lightskyblue;width: 200px; height:200px;"></Page>
                <button @click="fn(1)" >切换至第二个页面</button>
                <button @click="fn(2)">切换至第一个页面</button>
            </div>
        </div>
    </template>
    <script>
    import Page from "./components2/Page.vue";
    export default {
        data() {
            return {
                isShow: true,
                info1:"第一个页面",
                info2:"第二个页面"
            }
        },
        components: {
            Page
        },
        methods: {
            fn(i) {
                if (i == 1) {
                    this.isShow = false
                } else if (i == 2) {
                    this.isShow = true
                }
                console.log(2222)
            }
        }
    }
    </script>
    <style scoped>
    /* #soecnd {
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
    } */
    </style>

    子组件的代码:

    <template>
        <div>
            <div class="pageBox">
                {{pa}}
            </div>
        </div>
    </template>
     
    <script>
    export default {
        data(){
            return{
                msg:"11111"
            }
        },
        props:["pa"]
    }
    </script>
     
    <!-- <style>
        /* 如果这里有样式,页面渲染的时候一直是这个样式,父组件引入子组件时的行内样式也改不了样式 */
        .pageBox {
            width: 200px;
            height: 200px;
            background-color: coral;
        }
    </style> -->

    推荐学习:《vue.js视频教程

    以上就是vue中怎么实现点击切换页面的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:Vue
    上一篇:vue3安装太卡怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 一文聊聊Vue中的KeepAlive组件• Vue.js实战入门:如何对数组和对象进行循环• 实战:vscode中开发一个支持vue文件跳转到定义的插件• 深入理解vue2中的VNode和diff算法• Vue跳转页面如何隐藏底部导航tabbar?两种方法介绍
    1/1

    PHP中文网