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)