ホームページ > 記事 > ウェブフロントエンド > Vueでクリック切り替えページを実装する方法
Vue は、クリックしてページを切り替えるメソッドを実装します: 1. コンポーネントを登録し、親要素で使用します; 2. v-if と v-else を使用してページの表示と非表示を制御します; 3 . 2 つ与える ボタンはイベントをバインドし、v-if 値の変更を制御します; 4. イベントをカスタマイズし、ページに表示するために親要素の値を子要素に渡すことで、ページの切り替え効果がより適切に表示されます。
このチュートリアルの動作環境: Windows7 システム、vue3、Dell G3 コンピューター。
vue でクリックしてページを切り替えるにはどうすればよいですか?
Vue の場合 -- ボタンをクリックしてページを切り替えます
vue を使用してページ切り替え効果を作成します。
アイデア:
コンポーネントを登録し、親要素で使用します。
v-if と v-else を使用して、ページの表示と非表示を制御します。
イベントを 2 つのボタンにバインドします (同じメソッドの場合はパラメーターを使用してどちらのボタンがクリックされたかを区別します。別のイベントの場合は区別しやすいです)、コントロール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 ビデオ チュートリアル 》
以上がVueでクリック切り替えページを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。