• uni-app


    参考uni文档:https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A

    参考vue文档:https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F

     

    Class类和Style通过值快速切换

    uni官方和vue文档有不明之出,官方已指出

     

      1 <template>
      2     <view class="content f f-wrap">
      3 
      4         <image class="logo" src="../../static/image/myHover.png" @click="tap"></image>
      5 
      6         <!-- 
      7             前:样式
      8             后:控制:显示/隐藏
      9          -->
     10 
     11 
     12         <!-- 单类 -->
     13         <view :class="{ active: isActive }">111</view>
     14 
     15         <!-- 对象 -->
     16         <view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
     17 
     18         <!-- 数组 -->
     19         <view class="static" :class="[activeClass, errorClass]">333</view>
     20 
     21         <!-- 条件 -->
     22         <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
     23 
     24         <!-- 数组+对象 -->
     25         <view class="static" v-bind:class="[{ activeGrey: isActive }, errorClass]">555</view>
     26 
     27         <!-- 执行类 -->
     28         <view class="container" :class="computedClassStr"></view>
     29         <view class="container" :class="{activeGrey: isActive}">9999</view>
     30 
     31 
     32 
     33         <!-- style支持的类 -->
     34         <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
     35         <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
     36 
     37     </view>
     38 </template>
     39 
     40 <script>
     41    
     42   
     43 
     44     export default {
     45         data() {
     46             return {
     47                 title: 'Hello',
     48 
     49                 // 单激活类
     50                 isActive: true,
     51                 hasError: true,
     52 
     53                 // 多种激活类
     54                 activeClass: {
     55                     'active': false,
     56                     'text-danger': true
     57                 },
     58                 errorClass: {
     59                     'active': true,
     60                     'text-danger': false
     61                 },
     62                 
     63                 activeColor:true,
     64                 fontSize:30
     65             }
     66         },
     67         onLoad() {
     68             this.fetchData()
     69             console.log('页面加载')
     70         },
     71         onShow() {
     72             console.log('页面显示')
     73         },
     74         onReady() {
     75             console.log('页面初次显示')
     76         },
     77         onHide() {
     78             console.log('页面隐藏')
     79         },
     80         onUnload() {
     81             console.log('页面卸载')
     82         },
     83         onBackPress() {
     84             console.log('页面返回...')
     85         },
     86         onShareAppMessage() {
     87             console.log('分享!')
     88         },
     89         onReachBottom() {
     90             console.log('下拉加载...')
     91         },
     92         onPageScroll() {
     93             console.log('页面滚动...')
     94         },
     95         onPullDownRefresh() {
     96             console.log('上拉刷新...')
     97             uni.stopPullDownRefresh();
     98         },
     99 
    100         // #ifdef APP-PLUS
    101         onNavigationBarButtonTap() {
    102 
    103         },
    104         // #endif
    105 
    106         methods: {
    107             tap(e) {
    108                 console.log('tap点击!', e);
    109             },
    110             fetchData() {
    111                 console.log('拉取数据...');
    112             },
    113             computedClassStr() {
    114                 return this.isActive ? 'actives' : 'active'
    115             }
    116         }
    117     }
    118 </script>
    119 
    120 <style lang="scss">
    121     .active {
    122         color: #f00;
    123     }
    124 
    125     .activeGrey {
    126         color: #aaa;
    127     }
    128 
    129     .text-danger {
    130         color: #f0f;
    131         font-weight: bold;
    132     }
    133 
    134     .f {
    135         display: flex;
    136     }
    137 
    138     .f-wrap {
    139         flex-wrap: wrap;
    140     }
    141 </style>

     

     

    通过模板(template)端控制模板

     

     通过控制端(JS)来控制行为

     

    通过(CSS)显示端进行显示

  • 相关阅读:
    结合react-amap使用高德地图的原生API
    QSqlRelationalTableModel的Select语句会改变列的名字
    实体对象模型中使用自跟踪实体分离Model和Context
    An incompatible version 1.1.14 of APR based Apache Tomcat Native library is installed, while Tomcat
    一步一步学习Unity3d学习笔记系1.4单服模式架构
    MongoDB的连接字符串
    将QQl里面的休息都迁移过来了
    WPF一段代码搞定所有的点击事件
    ini配置文件的读取
    手写Json转换
  • 原文地址:https://www.cnblogs.com/cisum/p/10012492.html
走看看 - 开发者的网上家园