关于vue.js:vue动态绑定背景色

1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在应用vue+vant开发的过程中,咱们可能会须要动静绑定背景色,上面我来分享一下如何实现,心愿对你有所帮忙。
4.在这里我是依据后盾返回的一个字符串,取这个字符串的最初一位,而后取模,如果是奇数则渲染 O,偶数渲染E。上面我来分享一下如何实现。
5.废话不多说,先看效果图:

6.看一下后盾返回的字符串:

如何实现呢?请看上面。

6.在template中增加入戏代码:

<van-row> <van-col v-for="(itam,index) in item.winners" span="2":style="{'background':$cJs.Zj(itam.lucky_ticket_token)=='E'?'red':'green'}">{{$cJs.Zj(itam.lucky_ticket_token)}} </van-col></van-row>

思路:判断 $cJs.Zj(itam.lucky_ticket_token) 这个办法返回的值是什么,如果是E就让背景色为red,否则是 green。

7.封装对应的办法:

//字符串截取function Zj(cstring) {  cstring = cstring + "";  cstring = cstring.charAt(cstring.length - 1);  if (cstring % 2 == "0") {    cstring = "E"  } else {    cstring = "O";  }  return cstring;}

在这个我的项目中,我把公共的办法抽离到了一个文件里,而后挂载到了全局。对应的调用办法,在template中。

8.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。