Interpreting the Class and Style binding of mpvue official documents and unsupported syntax

When the vue.js project is converted into an applet, the code of the original page is copied directly. It is found that the layout has changed a lot. Many css styles of the tags that have been set have not been displayed. By looking at the official documents, we can see that the Class and Style binding syntax of the original vue.js are not suitable for mpvue. Here are the summary:

I.: class binding method
(1).mpvue support: class = "{active: isactive}"

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

.career{
 background: red;
}

(2).mpvue supports ternary expression (v-bind: class = "[isactive? ActiveClass: '"])

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

(3).mpvue supports dynamic arrays (: class = [{'career': istest}, 'bottom'])

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

(4).mpvue does not support the form of binding object (: class="ClassObject")

<template>
  <div>
      <div :class="career">test</div>
  </div>
</template>

.career{
 background: red;
}

This way of binding objects can be used on vue.js, but not mpVue. According to the official prompt, we can use the computed method to generate a class or style string and insert it into the page.

Change to a form code suitable for mpvue:

<template>
  <div>
      <div :class="computedClassObject">test</div>
  </div>
</template>

computed: {
        computedClassObject () {
            return 'career'//Important: only the string of class needs to be generated in the computed method
        }
    },

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

II.: style binding method

(1) mpvue supports direct use in templates: style

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

(2) mpvue supports multi group binding (hump writing)

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

(3).mpvue does not support binding objects

<template>
  <div>
      <div :style="styleObj">test</div>
  </div>
</template>

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

This way of binding objects directly is also not feasible on mpvue, which needs to be modified.
According to the official document prompt, the following changes are made to support mpvue:

<template>
  <div>
      <div :style="computedClassObject">test</div>
  </div>
</template>

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

Convert the style of the object format to the string format method:

Convert object to style string
showJson(style){
          for(let i in style){
              s.push(i+':'+style[i]);
          }
          s = s.join(';')
          return  s
      }

Conclusion: according to the official point out that the best practice is to choose the syntax supported by mpvue. Considering the performance, it is recommended not to rely on this excessively. Finally, the official pointed out that it is not supported to bind Style with Class on components.

Tags: Vue

Posted on Mon, 02 Dec 2019 14:34:17 -0800 by Jonob