通常有些样式是根据动态实现,所以需要使用到三目运算来判断

: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>

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐