关于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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。