vue 中对style、disable 等样式进行条件判断

本文为博主原创，未经允许不得转载：

一 原生用法

style="width: 100%; margin-top: 20px" disabled

 

二  三元表达式

<a :style="{color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" target="_self">{{con.subTitle}}</a>

 或者：

<Button  type="text" size="small" @click="showEdit(row)" :style="row.status==0?'color:#2d8cf0':''" :disabled="row.status==1">修改</Button>

 

三 函数用法

 <div :style="{ height: tableRowHeight(item) }" class="tableRowCox">
              {{ item.id ? item.id : "--" }}
  </div>

 

四 变量用法

<div :style="{ height:conFontHeight}"> {{ item.id ? item.id : "--" }} </div>