业务需要使用多个class，开始试错，总是渲染不正确，于是多做尝试，做个总结。
一、字符串绑定法
-
单个
class:class=“url.indexOf(‘rank’) !== -1 ? ‘rank’: ‘’”
-
多个
class:class=“'main-body ’ +(url.indexOf(‘rank’) !== -1? ‘rank’: ‘’)”
二、 对象绑定法
-
单个
class:class="{‘rank’：url.indexOf(‘rank’) !== -1} "
-
多个
class:class="{‘rank’：url.indexOf(‘rank’) !== -1, ‘main-body’:true} "
三、 数组绑定法
-
单个
class:class=" [url.indexOf(‘rank’) !== -1 ? ‘rank’: ‘’]"
-
多个
class:class=“[url.indexOf(‘rank’) !== -1?‘rank’:‘’, ‘main-body’]”
四、数组对象绑定法
-
单个
class:class=“[{‘rank’: url.indexOf(‘rank’) !== -1}]”
-
多个
class:class=“[{‘rank’: url.indexOf(‘rank’) !== -1}, ‘main-body’]”
五、 computed绑定法
上面的几种写法都可以改为computed写法，return 对应的类型就好了
computed: {
className: function () {
return this.url.indexOf('rank') !== -1 ? 'rank': '';
//return {'rank':this.url.indexOf('rank') !== -1};
//return [this.url.indexOf('rank') !== -1 ? 'rank': ''];
//return [{'rank': url.indexOf('rank') !== -1}];
},
},
参考资料
[vue动态绑定class的最常用几种方式]