VUE三目运算使用 :style与:class
通常有些样式是根据动态实现,所以需要使用到三目运算来判断:style三目运算表达式如下<a :style={ '样式名': 三目运算符表达式 ? 'true样式值' : 'false样式值' }>显示页面字段</a>例:<a :style="{ cursor: record.busiStatus === '82' ? 'pointer' : 'no-drop' }"&
·
通常有些样式是根据动态实现,所以需要使用到三目运算来判断
:style三目运算表达式如下
<a :style="{ '样式名': 三目运算符表达式 ? 'true样式值' : 'false样式值' }">显示页面字段</a>
例:
<a :style="{ cursor: record.busiStatus === '82' ? 'pointer' : 'no-drop' }">手工回盘</a>
三目运算符判断多个条件如下:
<span>{{key == 1 ? ‘我爱你’: key == 2 ? '我喜欢你' : key == 3 ? '我恨你' : '我讨厌你'}}</span>
:class三目运算表达式如下
<a :class=[ 三目运算符表达式 ? 'true类名' : 'false类名' ]>显示页面字段</a>
例:
<a class='testClass' :class=[ true === 0 ? 'trueClass' : 'falseClass' ]>手工回盘</a>
更多推荐
所有评论(0)