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

最新推荐文章于 2024-07-30 16:49:30 发布

春意迟迟、

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量4.1k

点赞数 1

文章标签：前端 html vue.js

本文链接：https://blog.csdn.net/qq_58167492/article/details/127256918

版权

本文通过Vue展示了如何创建一个点击按钮切换页面的效果。利用v-if和v-else指令控制页面显示，结合按钮事件处理和自定义事件传递数据，实现场景间的动态切换。

摘要由CSDN通过智能技术生成

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

思路：

注册一个组件，并在父元素中使用。
使用v-if 和 v-else 来控制页面的显示与隐藏。
给两个按钮绑定事件（如果是同一个方法，使用传参来区别点击的哪个按钮；如果是不同的事件，就很好区分），控制v-if 值的更改。
自定义事件，将父元素的值传给子元素，用来显示到页面上，从而更好显示页面的切换效果。

父组件代码：

<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>