vue class 动态声明的几种方式

业务需要使用多个class，开始试错，总是渲染不正确，于是多做尝试，做个总结。

一、字符串绑定法

1. 单个class

:class="url.indexOf('rank') !== -1 ? 'rank': ''"

2. 多个class

:class="'main-body ' +(url.indexOf('rank') !== -1? 'rank': '')"

二、 对象绑定法

1. 单个class

:class="{'rank'：url.indexOf('rank') !== -1} "

2. 多个class

:class="{'rank'：url.indexOf('rank') !== -1, 'main-body':true} "

三、 数组绑定法

1. 单个class

:class=" [url.indexOf('rank') !== -1 ? 'rank': '']"

2. 多个class

:class="[url.indexOf('rank') !== -1?'rank':'', 'main-body']"

四、数组对象绑定法

1. 单个class

:class="[{'rank': url.indexOf('rank') !== -1}]"

2. 多个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的最常用几种方式