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初体验</title>
    <script src="../js/vue221.js"></script>
    <style>
    .active{
        color:red;
    }
    </style>
</head>
<body>
   <div id="app">
    <ul>
        <li @click="fn1(1)">1</li>
        <li @click="fn1(2)">2</li>
        <li @click="fn1(3)">3</li>
    </ul>
    <div v-if="a==1">1</div>
    <div v-if="a==2">2</div>
    <div v-if="a==3">3</div>
   </div>
    <script>
       var vm=new Vue({
           el:"#app",
           data:{
             a:1
           },
           methods:{
            fn1:function(x){
                this.a=x
            }
           }
       })
    </script>
</body>
</html>