快应用动态绑定样式和class

一：动态绑定样式例子1 view层：

<div class="column check"  style="transform:{{rotate}}">
            <image src="../common/imgs/home_icon1.png" class="face" @click="goBanner('2')"></image>
            <text>扫脸检测</text>
        </div>

data层

 data: {
        rotate: 'rotate(9deg)',
    },

例子2

 style="{{index === '0'?' height: 320px; border-bottom: 1px solid #F2F2F2;':''}}"

二：动态绑定class 例子1 view层

<div class="top {{ content.length > 1 ? (content.length-1 == $idx ? '' : 'line-bottom') : ''}}" onclick="{{ subtitleLink($item.link) }}">
                <text class="title">{{$item.title}}</text>
                <text class="subtitle">{{$item.subtitle[0].label}}：{{$item.subtitle[0].text}}</text>
            </div>

例子2 view层

 class="result-item {{index !== '0'?'result-item-charitableOrg':''}}"

style

    .result-item {
        justify-content: space-between;
        align-items: center;
        margin: 0 60px;
        padding: 54px 0;
        &-charitableOrg {
            border-bottom: 1.5px solid #F2F2F2;
            height: 320px;
        }}

下方是一个例子

view层

< text class="title-img {{flag?'title-img-default':'title-img-active'}}" @click="change">
    < /text>

data层

  data: {
      flag: true,
  },
 
   change() {
    this.flag = !this.flag
  },

style

.title-img {
  width: 140px;
  height: 140px;
  &-default {
    background-image: url("https://quickapp.gjzwfw.gov.cn/admin/resource/file/download/home_handleAffairs1.png");
  }
  &-active {
    background-image: url("https://quickapp.gjzwfw.gov.cn/admin/resource/file/download/home_handleAffairs2.png");
  }
}

效果测试是成功的

1.默认

2.点击change()