uni-app之Class与样式的绑定

2019-04-14  本文已影响0人  Crcker

1.uni-app样式的导入:

<style>
      @import url("common/common.css");
 </style>

这样导入每个界面都可以使用此样式

2.样式的绑定方式:

               <!-- 常规形式 -->
        <view class="red"> 我是一个红色的字体</view>
        <view class="red font-big"> 我是一个大红色的字体</view>
        <view style="color: #00FF00;"> 我是一个绿色的内联样式字体</view>
        
        <!--style 内联样式 绑定的形式 其中fontSize是一个变量,改变这个变量,字体也会随之改变-->
        <view :style="{fontSize:fontSize + 'px'}"> 我是一个动态的内联样式字体</view>
     
        <!-- 绑定的形式导入,接收的是一个数组,元素之间用逗号分割 -->
         <view :class="['red', 'font-big','font-bold' ]" > 我是一个大红色粗体的字体 </view>
        <!-- 动态绑定 -->
        <view :class="[isBig ? 'font-big' : 'font-small' ]" >我不是大字体就是小字体 </view>
            
        <view  :class="{'font-big': isBig }">我不一定是一个大的字体</view>
        
        <view  :class="[{'red': isRed },'blue']">我不一定是一个蓝色字体</view>

QQ截图20190414210233.png
上一篇 下一篇

猜你喜欢

热点阅读