vue动态绑定背景色

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

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

如何实现呢?请看下面。

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

 
{{$cJs.Zj(itam.lucky_ticket_token)}}
 

思路:判断 $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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。