uni-app 动态绑定class 和 style

uni-app style class 绑定官网

vue style class 绑定官网

	// 绑定单个内联样式
    <view :style="{'display':config.isHaveSearch ? 'block':'none'}" >view>
    <view :style="{color:item.age<18?'#ccc':''}">view>
    
	<view :style="{ color: activeColor, fontSize: fontSize + 'px' }">view>
    <view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]">view>

	// 绑定单个class属性
	<view :class="{ 'active': isActive }" >view>
	<view :class="{'active':isActive==index}">view>
	
	<view :class="{ active: isActive }">view>
	<view :class="{ active: isActive, 'text-danger': hasError }">view>
	<view :class="[activeClass, errorClass]">view>
	<view :class="[isActive ? activeClass : '', errorClass]">view>
	<view :class="[{ active: isActive }, errorClass]">view>


	<view :class="cosi==index ? 'select':'unselect'">view>	

	// 数组的方式，直接绑定多个 class 属性
	<view :class="['green', 'font-big','font-bold' ]" ></view>

	// 多条件绑定样式
   <view class='step' :class="[item.state=='工作' ? 'online' : '',item.state=='空闲' ? 'idle' : '',item.state=='离线' ? 'offline' : '']">

	// 绑定多个class属性
	
	<view :class="{ 'active': isActive, 'sort': isSort }"></view>
	// data 中声明
	:class="classObject"
	data() {
	  return {
    	classObject:{ active: true, sort:false }
	  }
	}
	
	// 第三种（使用computed属性）
	:class="classObject"
	data() {
	  return {
    	isActive: true,
	    isSort: false
	  }
	},
	computed: {
	  classObject: function () {
    	return {
      	   active: this.isActive,
	       sort:this.isSort
        }
    }
 

	:class="[isActive,isSort]"
	data() {
	   return{
          isActive:'active',
          isSort:'sort'
       }
    }
    // 数组与三元运算符结合判断选择需要的class
   <view :class="[item.name? 'lg':'sm']"></view>
   <view :class="[item.age<18? 'gray':'']"></view>
   // 数组对象结合
   :class="[{ active: isActive }, 'sort']"
   

// 复杂情况
<text class="title" :style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" style="color:red;">{{title}}</text>