Vue系列： 如何經過組件的屬性props設置樣式

好比咱們要在vue中顯示百度地圖，而後將相關的代碼包裝成組件，而後須要由外部來設置組件的高度，關於props的介紹，能夠參考：

http://cn.vuejs.org/guide/components.html#Props 

因此我在該組件的內部添加了mapHeight屬性，以下：

props:{

    // 地圖在該視圖上的高度

    mapHeight:{

      type: Number,

      default: 200

    }

}

而後要在地圖的div中經過樣式設置該div的高度，，能夠有如下三種方式：

第一種：

<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>

使用這種方式在chrome中沒問題，可是若是打開chrome的控制檯就會發現vue給出以下警告，也就是在ie中會有問題。

vue.common.js?e881:1019 [Vue warn]: style="width: 100%; height: {{mapHeight}}px": interpolation in "style" attribute will cause the attribute to be discarded in Internet Explorer. Use v-bind:style instead.

第二種：

關於如何使用綁定方式來設置樣式，能夠參考：

http://cn.vuejs.org/guide/class-and-style.html#u5BF9_u8C61_u8BED_u6CD5-1 

而後我設置的樣式以下：

 <div id="allmap" :style="{width: '100%', height: mapHeight + 'px'}"></div>

通過驗證是OK的，能夠正常顯示。

第三種：

可是根據vue中的官方說法，

http://cn.vuejs.org/guide/class-and-style.html#u5BF9_u8C61_u8BED_u6CD5-1  

使用樣式對象的方式更好

 <div id="allmap" v-bind:style="mapStyle"></div>

同時在data屬性中添加以下屬性：

data: function() {

    return {

      mapStyle:  {

        width: '100%',

        height: this.mapHeight + 'px' 

      }

    }

  },

因此，最終選擇第三種方式。

來自爲知筆記(Wiz)