zoukankan      html  css  js  c++  java
  • 前端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;
            }
  • 相关阅读:
    个人总结08
    npm快速入门
    Activity简介
    SELinux
    正则表达式学习笔记(二)表达式的匹配原理
    git学习笔记(一)
    使用VSFTPD传输文件
    正则表达式学习笔记(一)正则表达式入门
    Linux基础(一)磁盘分区
    Shell脚本笔记(九)数组
  • 原文地址:https://www.cnblogs.com/chen527/p/9674895.html
Copyright © 2011-2022 走看看