在uniApp中动态绑定class类名

通过函数的方式添加:

// html
<span class="circularRing" :class="[borderColor({id:'01'})]"></span>
// js
borderColor(item) {
     let className = '';
     switch (item.id) {
         case '01':
             className = 'bdcBlue';
             break;
         case '02':
             className = 'bdcOrange';
             break;
         case '03' :
             className = 'bdcViolet';
             break;
         default:
             className = ''
     }
     return className;
 },

在vue中:class="borderColor()"不需要加中括号,但是在uniapp中要加,三元运算符的方式也一样:

<span class="circularRing" :class="[index == 1?'bdcOrange':'bdcBlue']"></span>

通过一个对象的方式:

// 这里和vue绑定的方式一样
<span class="circularRing" :class="{'bdcOrange':index == 1}"></span>

你可能感兴趣的:(javascript,vue.js,html5,css3)