v-if和v-else和vue-filter过滤器结合实现的条件判断改变样式的功能

前天做后台管理有一个新需求就是根据条件渲染的数据颜色是不同的，废话少说直接上代码

考点一 v-if和v-else的用法

先说v-if和v-else的用法，在上面代码中v-if 里面的条件满足scope.row.zfNumBl-scope.row.payNumThreshold>0这两个值相减大于0这个条件时，页面上显示的数字就标红，v-else-if里面的条件满足Math.abs(scope.row.zfNumBl-scope.row.payNumThreshold)<0.1||Math.abs(scope.row.payNumThreshold-scope.row.zfNumBl)<0.1这个条件时，页面上显示的文字是橘黄色。

考点二 求绝对值的方法

Math.abs()的方法是取两个数之差的绝对值,

考点三 局部过滤器的使用

 <template slot-scope="scope">

            <span v-if="scope.row.zfMoneyBl-scope.row.payMoneyThreshold>0" style="color:red">{{scope.row.zfMoneyBl | toPercent}}|{{scope.row.payMoneyThreshold | toPercent}}</span>

             <span v-else-if="Math.abs(scope.row.zfMoneyBl-scope.row.payMoneyThreshold)<0.001||Math.abs(scope.row.payMoneyThreshold-scope.row.zfMoneyBl)<0.001" style="color:orange;">{{scope.row.zfMoneyBl | toPercent}}|{{scope.row.payMoneyThreshold | toPercent}}</span>

             <span v-else style="color:black;">{{scope.row.zfMoneyBl | toPercent}}|{{scope.row.payMoneyThreshold | toPercent}}</span>

          </template>

在js里面 写filters

想知道 注册全局和局部过滤器的区别参考博客https://blog.****.net/qq_41564405/article/details/89631882

考点四

toPercent的方法是把后台返给我的小数转换成百分比的形式