uni-app之Class与样式的绑定

1.uni-app样式的导入：

• 全局导入：即在App.vue中的Style标签中导入外联样式，如下：

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

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

• 单独导入：即在单个页面中的<Style>标签中使用@import的方式导入，如上图，或直接将样式写在标签中， 一个页面支持多个style标签。

2.样式的绑定方式：

• 下面列举了uni-app中可用的几种class绑定方式：

<!-- 常规形式 -->
        <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