文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue如何实现点击切换页面

2023-07-04 15:14

关注

本篇内容介绍了“vue如何实现点击切换页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

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></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如何实现点击切换页面”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯