比如我們要在vue中顯示百度地圖，然后將相關的代碼包裝成組件，然后需要由外部來設置組件的高度，關於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.
第二種：
關於如何使用綁定方式來設置樣式，可以參考：
然后我設置的樣式如下：
<div id="allmap" :style="{width: '100%', height: mapHeight + 'px'}"></div>
經過驗證是OK的，可以正常顯示。
第三種：
但是根據vue中的官方說法，
使用樣式對象的方式更好
<div id="allmap" v-bind:style="mapStyle"></div>
同時在data屬性中添加如下屬性：
data: function() {
return {
mapStyle: {
width: '100%',
height: this.mapHeight + 'px'
}
}
},
所以，最終選擇第三種方式。