首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

Vue 动态修改css样式

Sonder
2021-01-14
712字
2分钟
浏览 (4.4k)

一、内容简介

在使用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()获取我们在行内设置的数据即可。

转自:https://juejin.cn/post/6911662617178144776

下一篇 / 移动端Rem适配,基于vant

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)