一、内容简介
在使用vue开发时,经常会封装很多的组件方便复用,那么难免就有写样式相关组件,比如需要使用时传入颜色、高度等样式参数。
那么问题来了:我们要怎么在样式中使用组件中接收的参数呢?或者说,我们要怎么在样式中使用data中的变量呢?
二、代码演示
这个用法真的简单,没什么其他的知识点,直接上代码:
- <template>
- <div class="box" :style="styleVar">
- </div>
- </template>
- <script>
- export default {
- props: {
- height: {
- type: Number,
- default: 54,
- },
- },
- computed: {
- styleVar() {
- return {
- '--box-height': this.height + 'px'
- }
- }
- },
- }
- </script>
- <style scoped>
- .box {
- height: var(--box-height);
- }
- </style>
这样我们就在vue中实现了在样式里使用js变量的方法:
及通过css定义变量的方式,将变量在行内注入,然后在style中使用var()获取我们在行内设置的数据即可。
三、最后
以后,在封装一些需要动态传入样式参数的ui组件是不是简便了不少。你学会了么?赶快在项目中尝试一下吧~~
哈希表是个啥? 小白:庆哥,什么是哈希表?这个哈希好熟悉,记得好像有HashMap和H...
【51CTO.com快译】虽然Python语言可谓目前最为灵活的开发语言之一,但是开发人员...
竞价计费 购买竞价计费型实例 父主题: 选择弹性云服务器计费模式...
随着“Java超神季”活动进行,《〈Java开发手册(嵩山版)〉灵魂17问》来啦!解...
现在有很大一部分站长在选择服务器的时候是不会直接选择独立主机租用的而是会选...
为保证您的云耀云服务器正常运行,在使用前,请务必阅读以下使用须知和使用限制...
通常应用系统中会存在一些工作流编排、执行和控制场景,同时还要对流程的状态,...
哪里有试用 云服务器 ?现在大部分 云服务器 厂商都提供云服务的试用服务,不过...
注册 .com域名 需多少钱?. com域名 的首年注册费用是55元。不过,一般情况下,...
什么 域名 的网站不要备案?备案是我国国内的要求,根据中华人民共和国信息产业...