站長資訊網(wǎng)
vue實(shí)現(xiàn)點(diǎn)擊切換頁面的方法：1、注冊一個(gè)組件，并在父元素中使用；2、使用v-if和v-else來控制頁面的顯示與隱藏；3、給兩個(gè)按鈕綁定事件，并控制v-if值的更改；4、自定義事件，將父元素的值傳給子元素，用來顯示到頁面上，從而更好顯示頁面的切換效果。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、vue3、Dell G3電腦。
vue中怎么實(shí)現(xiàn)點(diǎn)擊切換頁面？
Vue案例–點(diǎn)擊按鈕切換頁面
用vue的方式做一個(gè)切換頁面的效果。
思路：
-
注冊一個(gè)組件，并在父元素中使用。
-
使用v-if 和 v-else 來控制頁面的顯示與隱藏。
-
給兩個(gè)按鈕綁定事件（如果是同一個(gè)方法，使用傳參來區(qū)別點(diǎn)擊的哪個(gè)按鈕；如果是不同的事件，就很好區(qū)分），控制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)" >切換至第二個(gè)頁面</button> <button @click="fn(2)">切換至第一個(gè)頁面</button> </div> </div> </template> <script> import Page from "./components2/Page.vue"; export default { data() { return { isShow: true, info1:"第一個(gè)頁面", info2:"第二個(gè)頁面" } }, 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>
登錄后復(fù)制
子組件的代碼：
<template> <div> <div class="pageBox"> {{pa}} </div> </div> </template> <script> export default { data(){ return{ msg:"11111" } }, props:["pa"] } </script> <!-- <style> /* 如果這里有樣式，頁面渲染的時(shí)候一直是這個(gè)樣式，父組件引入子組件時(shí)的行內(nèi)樣式也改不了樣式 */ .pageBox { width: 200px; height: 200px; background-color: coral; } </style> -->
登錄后復(fù)制
推薦學(xué)習(xí)：《vue.js視頻教程》
