Requirements: Two buttons (1,2) and three pages (A,B,C). When clicking button (1) to jump to one of the pages (A), the corresponding button 1 will not be displayed and the corresponding button (2,3) will be displayed. Similarly, click button (2) to jump to page B, the corresponding button (2) will not be displayed and the corresponding button (1,3) will be displayed.

The effect is as follows:

Ideas: Define A global variable type:’A'(default page A is displayed). When the corresponding button is clicked, use V-show (frequent button clicking is required to consume performance, Here v-show is used to control the display and hiding of buttons by controlling CSS styles so that their type is not equal to A, while the display of three pages (instead of div boxes) is controlled by V-if, V-else -if and else.

Concrete code (Vue)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title> v-if </title> <script SRC = "https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js" > < / script > < / head > < script > window. The onload = function () { Var app = new vue ({el: '#app', data: { type:'A', }, methods:{ changea(){ this.type = 'A' }, changeb(){ this.type = 'B' }, Changec (){this.type = 'C'}}})} </script> <body> <div id="app"> <div style="color:red"> <div v-if="type == 'A'"> A </div> <div v-else-if="type=='B'"> B </div> <div v-else> C </div> </template> <button @click='changea' v-show='type ! = = "A" '> page 1 < / button > < button @ click =' changeb 'v - show =' type! = = "B" > page 2 < / button > < button @ click = 'changec' v - show = 'type! </button> </body> </ HTML >Copy the code

Note: In addition, vUE can also use :is method for component switching, which is not discussed here.