vue中点击按钮切换效果（v-if的简单应用）需求：两个按钮（1,2），三个页面（A,B,C）,点击按钮（1）跳转到其中

需求：两个按钮（1,2），三个页面（A,B,C）,点击按钮（1）跳转到其中一个页面（A）时，对应的按钮1不显示，显示按钮（2,3），同理点击按钮（2），跳转到B页面，按钮（2）不显示，显示（1,3）按钮。

效果如图：

思路：页面虽然显示两个按钮，实则需要三个按钮做控制，定义一个全局变量type:'A'(默认显示A页面)，当点击对应的按钮，使用v-show（需要频繁点击按钮，消耗性能，这里使用v-show通过控制css样式来操控按钮的显示隐藏）使其type不等于A时出现，同时三个页面（这里用div盒子代替）的显示用v-if，v-else-if和else来控制。

具体代码（Vue）


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Vue中v-if的常见使用</title>
 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){

 //创建一个vue实例
 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">v-if的简单实用</div>
     <template>
         <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"'>页面1</button>
     <button @click='changeb' v-show='type !== "B"'>页面2</button>
     <button @click='changec' v-show='type !== "C"'>页面3</button>
</body>
</html>

注：除此之外，vue中还可以用:is方法进行组件切换，此处不展开讨论。