站長資訊網
vue實現點擊切換頁面的方法：1、注冊一個組件，并在父元素中使用；2、使用v-if和v-else來控制頁面的顯示與隱藏；3、給兩個按鈕綁定事件，并控制v-if值的更改；4、自定義事件，將父元素的值傳給子元素，用來顯示到頁面上，從而更好顯示頁面的切換效果。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
本教程操作環境：windows7系統、vue3、Dell G3電腦。
vue中怎么實現點擊切換頁面？
Vue案例–點擊按鈕切換頁面
用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> </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視頻教程》
