uni-app - Class 与 Style 绑定

参考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         
 10 
 11 
 12         
 13         <view :class="{ active: isActive }">111view>
 14 
 15         
 16         <view class="static" :class="{ active: isActive, 'text-danger': hasError }">222view>
 17 
 18         
 19         <view class="static" :class="[activeClass, errorClass]">333view>
 20 
 21         
 22         <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444view>
 23 
 24         
 25         <view class="static" v-bind:class="[{ activeGrey: isActive }, errorClass]">555view>
 26 
 27         
 28         <view class="container" :class="computedClassStr">view>
 29         <view class="container" :class="{activeGrey: isActive}">9999view>
 30 
 31 
 32 
 33         
 34         <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666view>
 35         <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777view>
 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）显示端进行显示

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！