vue中动态绑定style写法（配合v-for）

示例1：

<item v-for="(item, index) in items_income" :key="index" @click.native="onItemClick(item.id)">

    <div style="margin-top: -18px;margin-left: 40px">

       <span :style="{color:item.title_color}">{{item.title}}</span>

        <span class="percent :style="{height:item.left_ratio + '%'}"></span>

    </div>

</item>

<div v-for="item in newCoordinate"  :style="{background: 'rgba(245, 53, 14,0.5)',height: item[3] + 'px',width: item[2] + 'px',position: 'absolute',left: item[0] + 'px',top: item[1] + 'px'}">
</div>

示例2：

<view v-if="item.left_ratio !== null && item.left_ratio > 30" class="percent" :style="{height: item.left_ratio + '%',background: `url(${blueyewei}) repeat-y left top`}">
</view>

示例3：

<view

    :style="{color:'blue',width:divX}"

    class="selected">

    <image src="../../../static/images/gou.png" alt="表" style="position:absolute;right: 0;width: 22upx;height: 22upx;"></image>

</view>

<view

    :style="{color:'blue',width: divWidth,height: divHeight,position: 'absolute',border: '1px solid #00C755',left: divX,top: divY}"

    class="selected">

    <image src="../../../static/images/gou.png" alt="表" style="position:absolute;right: 0;width: 22upx;height: 22upx;"></image>

</view>

<script>

data() {

return {

    divX: '132.084991455px'，

    divY: '15.1886698405px',

    divWidth: '74.7720947266px',

    divHeight: '89.5207824707px',

}

}

</script>

示例4：

<p :style="[xx,yy]">itany</p>

<script>

data(){

return {

      xx:{color:'blue',fontSize:'30px'},

      yy:{backgroundColor:'#ff7300'}

}

</script>

示例5：（顺带总结了判断对象是否为空）

<view  class="row_cont" style="height: 170upx;" v-if="JSON.stringify(coordinateObj) !== '{}' ">
                    <text>{{`{"orgin_size": { "w": ${coordinateObj.divWidth}, "h": ${coordinateObj.divHeight}"}", "round:" { "x": ${coordinateObj.divX}, "y": ${coordinateObj.divY} } }`}}</text>

</view>

示例6：当后端返回的数组是字符串形式时

<view class="row_cont" style="height: 170upx;" v-if="equipdetaildata.Meters[1].watchRegion !== '[]'">

                    <text>{{`{"orgin_size": { "w": ${JSON.parse(equipdetaildata.Meters[1].watchRegion)[2]}, "h": ${JSON.parse(equipdetaildata.Meters[1].watchRegion)[3]}"}", "round:" { "x": ${JSON.parse(equipdetaildata.Meters[1].watchRegion)[0]}, "y": ${JSON.parse(equipdetaildata.Meters[1].watchRegion)[1]} } }`}}</text>

</view>

示例7(重点)：

    <view class="date" v-for="(item2,index2) in item.carmeras">
      <u-notice-bar :text="'到期日期' + item2.end_time + item2.renewals_day + '天后过期'"></u-notice-bar>
    </view>

示例8：

<u-modal :show="deleteConfirmShow" :title="`删除设备${equipment_id}`" :content='deleteConfirmContent' :showCancelButton="true">
</u-modal>

示例9：

<view>
{{ item2.end_time == null || item2.end_time == undefined ? '' : '到期日期' + item2.end_time}} {{item2.renewals_day == null || item2.renewals_day == undefined ? '' : item2.renewals_day + '天后过期'}}
</view>

示例10：style中使用三元运算符

//两个style同时使用
<view  v-for="(item,index) in alarminfo" :key="index" class="alarm_list" style="height:180upx;" :style="{'background':(index % 2 == 0 ? '#ffffff' : '#E4E4EF')}">
</view>

<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>

<a :style="{'visibility':(index < (value.length-1)?'':'hidden')}"></a>

示例11：class中使用三元运算符

<i class="iconfont "  :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>