Vue系列： 如何通过组件的属性props设置样式
2024-10-18 16:35:25
比如我们要在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'
}
}
},
所以，最终选择第三种方式。
最新文章
- Jsoncpp Compiler、Programming
- JavaScript字符串函数大全
- viewpage广告条的制作
- POJ 1088 滑雪【记忆化搜索】
- Linux 内核模块设计
- Singleton(单例)模式
- zabbix3.0 agent安装配置
- VS2017 提示警告 IDE0006
- 自制操作系统Antz(9)——实现内核 (下) 实现图形化界面
- easyui 进阶之tree的常见操作
- java幂等性的解决方案
- Delphi数据库技术中Disablecontrols和Enablecontrols的功能
- WCF分布式服务2-服务配置部署
- 试着用c写了一个多线程的同步
- go for range
- Python中文转拼音代码(支持全拼和首字母缩写)
- PG的集群技术：Pgpool-II与Postgres-XC Postgres-XL Postgres-XZ Postges-x2
- java常见反编译工具
- jQuery学习-访问设置元素内容
- ASP.NET MVC 2.0 参考源码索引