mpvueの公式文書を解読するClassとStyleのバインドと文法をサポートしない

3292 ワード
アプレット
vueでjsプロジェクトがウィジェットに変換されたとき、元のページのコードを直接コピーすると、レイアウトがずいぶん変わったことに気づき、すでに設定されているラベルのcssスタイルが表示されていないことが多く、公式ドキュメントを見て、元のvueを知った.jsのClassはStyleと文法をバインドし、mpvueに適していないものもあります.以下にいくつかの点をまとめます.
一.classバインド方式(1).mpvueサポート:class="{active:isActive}"


.career{
 background: red;
}

(2).mpvueは三元式(v-bind:class="[isActive?activeClass:''])をサポートします.

data () {
   return {
       isTest:ture
      } 
  }

(3).mpvueは動的配列(:class="{‘career’:isTest},‘bottom’")をサポートする.

data () {
    return {
        isTest:ture
       } 
   }
.career{
 background: red;
}
. bottom{
   background: yellow;  
}

(4).mpvueバインドされていないオブジェクトの形式(:class="ClassObject")


.career{
 background: red;
}

このようなオブジェクトをバインドする方法はvueである.jsでいいですが、mpVueではできません.公式のヒントに従ってcomputedメソッドでclassまたはstyle文字列を生成し、ページに挿入することができます.
mpvueに適した形式コードに変更:


computed: {
        computedClassObject () {
            return 'career'// ： computed   class 
        }
    },

二.スタイルバインド方式
(1). mpvueはテンプレートで直接使用することをサポートします:style

(2).mpvueはマルチグループバインドをサポートします(アルパカの書き方)

data(){
      return {
       bgColor: 'red',
        fontSize: 18,
      }
    }

(3).mpvueはバインドオブジェクトをサポートしていません


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

このようにオブジェクトを直接バインドする方法はmpvueでも不可能であり,修正が必要である.公式ドキュメントのヒントに基づいて、mpvueの変更を以下のようにサポートします.


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にバインドすることは、公式にはサポートされていません.
ActionScript 3(AS 3)クラスライブラリ学習の(一)——Object基本オブジェクト
クラスの高次特性