zoukankan      html  css  js  c++  java
  • 怎么在vue-cli中利用 :class去做一个底层背景或者文字的点击切换

    // html 

    <div class="pusherLists" :class="{hidden: isHidden}"> <span @click="allPusher" :class="{checkedSpan: active === ''}">全部</span> <span v-for="(author,index) in pusherList" :key="index" :class="{checkedSpan: active === author.name}" @click="choosePusher(author)">{{author.name}} </span> </div>

    此时的div 和span 可以换成 row ,col ,利用flex 进行布局,便于美观居中。这里不做详解。

    // 它的核心点: 

    :class="{checkedSpan: active === ''}"
    :class="{checkedSpan: active === author.name}"
    
    data(){
       active:''     // 默认全部
    }
    
    class 的动态变量设置,前面是一个class类名,如果后面的条件成立,则添加这个类名,否则不添加。

    // 效果图:

     
  • 相关阅读:
    数据访问类
    批量删除与查询
    CRUD
    数据访问与全局变量
    设计模式
    加载类
    PDO数据访问抽象层(上)
    PDO数据访问抽象层(下)
    会话控制
    php租房题目
  • 原文地址:https://www.cnblogs.com/panax/p/10953805.html
Copyright © 2011-2022 走看看