Vue系列：如何通过组件的属性props设置样式

时间：2016-08-13 22:31:45 阅读：299 评论：0 收藏：0 [点我收藏+]

标签：

比如我们要在vue中显示百度地图，然后将相关的代码包装成组件，然后需要由外部来设置组件的高度，关于props的介绍，可以参考：

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

所以我在该组件的内部添加了mapHeight属性，如下：

props:{

// 地图在该视图上的高度

mapHeight:{

type: Number,

default: 200

}

然后要在地图的div中通过样式设置该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

然后我设置的样式如下：

经过验证是OK的，可以正常显示。

第三种：

但是根据vue中的官方说法，

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

使用样式对象的方式更好

同时在data属性中添加如下属性：

data: function() {

return {

mapStyle: {

width: ‘100%‘,

height: this.mapHeight + ‘px‘

}

所以，最终选择第三种方式。

来自为知笔记(Wiz)

Vue系列：如何通过组件的属性props设置样式

标签：

原文地址：http://www.cnblogs.com/strinkbug/p/5768871.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

Vue系列： 如何通过组件的属性props设置样式

Vue系列：如何通过组件的属性props设置样式