uniapp之动态绑定class和style样式(vue.js)

(1) 动态class样式

<view class="shape_6" v-bind:class="{'mode_selected_bg':(workMode=='simple'),'mode_unselected_bg':(workMode!='simple')}"></view>
<view class="simple_mode" v-bind:class="{'mode_selected_cr':(workMode=='simple'),'mode_unselected_cr':(workMode!='simple')}">模式一</view>
    
data () {
        return {
            workMode:"simple",
        }
    },
        
.shape_6 {
  border-radius: 50%;
  /* background-color: rgb( 215, 222, 227 ); */
  position: absolute;
  left: 642px;
  top: 251px;
  width: 152px;
  height: 152px;
  z-index: 32;
}
.mode_selected_bg{
    background-color: rgb( 0, 169, 226 );
}
.mode_selected_cr{
    /* color: rgb( 255, 255, 255 ); */
    color: #FFFFFF;
}
.mode_unselected_bg{
    background-color: rgb( 215, 222, 227 );
}
.mode_unselected_cr{
    color: rgb( 0, 169, 226 );
}

.simple_mode {
  font-size: 20px;
  font-family: "Microsoft YaHei";
  /* color: rgb( 0, 169, 226 ); */
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  -moz-transform: matrix( 1.57753433164902,0,0,1.57753433164902,0,0);
  -webkit-transform: matrix( 1.57753433164902,0,0,1.57753433164902,0,0);
  -ms-transform: matrix( 1.57753433164902,0,0,1.57753433164902,0,0);
  position: absolute;
  left: 677.039px;
  top: 316.793px;
  z-index: 33;
}

(2) 图片动态资源:src
eg1：后台返回图片的相对路径，需拼接完整的网络地址

<swiper class="screen-swiper round-dot" style="min-height: 100%;" :indicator-dots="true" :circular="true" :autoplay="true" 
                        interval="5000" duration="500" indicator-color="#8799a3" indicator-active-color="#0081ff">
    <swiper-item v-for="(item,index) in images" :key="index">
        <!-- <image :src="item" mode="aspectFill"></image> -->
        <image :src= "getImgUrl(item)" mode="aspectFill"></image>
    </swiper-item>
</swiper>

data () {
        return {
            images:[
                 "/image/201907/chicken1.jpg",
                 "/image/201907/chicken2.jpg",
                "/image/201907/chicken3.jpg"
            ],
        }
    },

getImgUrl:function(item){
    var requestUrl = "http://" + _self.getIP() + "/" + item;
    return requestUrl;
},

eg2：动态图片资源和动态class样式

<image class="scan_gan" :src="getImgUrl(isUseScanGun)"></image>
<view class="scan_gan_des" :class="{'jk-text-blue-main':isUseScanGun,'jk-text-gray2':!isUseScanGun}">扫码枪</view>

data () {
        return {
            isUseScanGun:false,
        }
    },

getImgUrl:function(scanGanFlag){
    var imageUrl = "";
    if(scanGanFlag){
        imageUrl = "../../static/scan_gan1.png"
    }else{
        imageUrl = "../../static/scan_gan.png"
    }
    return imageUrl;
},