解读mpvue官方文档的Class 与 Style 绑定及不支持语法

在vue.js项目转化为小程序时，把原来页面的代码直接拷贝过去，发现布局改变很多，很多已经设置的标签的css样式并没有显示出来，查看官方文档，得知原来vue.js的Class 与 Style 绑定语法，有些不适合mpvue,以下总结几点：

一. :class绑定方式
(1).mpvue支持:class="{ active: isActive }"

<template>
  <div>
      <div :class="{career:true}">测试</div>
  </div>
</template>

.career{
 background: red;
}

(2).mpvue支持三元表达式（v-bind:class="[isActive ? activeClass : ’ ']）

<template>
 <div>
     <div :class="[isTest?'career':'']">测试</div>
 </div>
</template>
data () {
   return {
       isTest:ture
      } 
  }

(3).mpvue支持动态数组（:class="[{‘career’: isTest} , ‘bottom’]"）

<template>
  <div>
      <div :class="[{'career': isTest} , 'bottom']">测试</div>
  </div>
</template>
data () {
    return {
        isTest:ture
       } 
   }
.career{
 background: red;
}
. bottom{
   background: yellow;  
}

(4).mpvue不支绑定对象的形式（:class=“ClassObject”）

<template>
  <div>
      <div :class="career">测试</div>
  </div>
</template>

.career{
 background: red;
}

这种绑定对象的方式在vue.js上可以，在mpVue上不可行。根据官方提示我们可以用 computed 方法生成 class 或者 style 字符串，插入到页面中。

更改为适合mpvue 的形式代码：

<template>
  <div>
      <div :class="computedClassObject">测试</div>
  </div>
</template>

computed: {
        computedClassObject () {
            return 'career'//重点：只需要在computed 方法生成 class的字符串
        }
    },

<style>
.career{
 background: red;
}
</style>

二. :style绑定方式

(1). mpvue支持直接在模板中使用:style

<template>
  <div>
      <div :style="{background: 'red'}">测试</div>
  </div>
</template>

(2).mpvue支持多组绑定（驼峰写法）

<template>
  <div>
      <div :style="{'background':'bgColor',fontSize: fontSize + 'px'}">测试</div>
  </div>
</template>
data(){
      return {
       bgColor: 'red',
        fontSize: 18,
      }
    }

(3).mpvue不支持绑定对象

<template>
  <div>
      <div :style="styleObj">测试</div>
  </div>
</template>

data () {
    return {
        styleObj: {
            type: Object,
            default: function () {
                return {
                    background: 'black',
                    color: "yellow"
                }
            }
        }
    }
  },

这种直接绑定对象的方式在mpvue上也是不可行的，需要做一下的修改。
根据官方文档提示作如下支持mpvue的修改为：

<template>
  <div>
      <div :style="computedClassObject">测试</div>
  </div>
</template>

computed: {
        computedClassObject () {
            return this.showJson({
                background: 'red',
                color:"yellow"
            })
        }
    }

把对象格式的style转化为字符串格式方法：

将对象转变为style字符串
showJson(style){
          for(let i in style){
              s.push(i+':'+style[i]);
          }
          s = s.join(';')
          return  s
      }

总结：根据官方指出最佳实践最好选择mpvue支持的语法，从性能考虑，建议不要过度依赖此。最后官方指出暂不支持在组件上使用 Class 与 Style 绑定。