前端vue 里的tab切换 减少dom操作

<div class="vuedemo">
    <div class="all">
      <div class="tabone" v-bind:class="idns==0?'no':''"  v-on:click="idns=0">tab1</div>
      <div class="tabone" v-bind:class="idns==1?'no':''"  v-on:click="idns=1">tab2</div>
      <div class="tabone" v-bind:class="idns==2?'no':''"  v-on:click="idns=2">tab3</div>
    </div>
    
    <div class="vue " v-bind:class="idns==0?'yes':''">list1</div>
    <div class="vue"  v-bind:class="idns==1?'yes':''">list2</div>
    <div class="vue"  v-bind:class="idns==2?'yes':''">list3</div>
</div>

js

<script>
   new Vue({
       el: '.vuedemo',
       data: {
       idns:0
      },
       methods:{
         var that = this;
　　　　　 that.fa();         
      },
　　　　methods:{ 
　　　　　　fa: function(){	
　　　　　　}	
　　　　}               
   })
</script>

style

　　　　 .all{
         　　overflow: hidden;
        }
        .tabone{
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: darkorange;
        }
    
        .vue{
            width: 150px;
            height: 50px;
            background: silver;
            display: none;
            line-height: 50px;
            text-align: center;
        }
        .vue.yes{
            display: block;
        }
        .yes{
            color: white;
        }
        .no{
            background: darkblue;
            color: white;
        }

 

转载于:https://www.cnblogs.com/chen527/p/9674895.html