一个 1 分钟就学会的 vue 小技巧（真的一看就会）
原创一个 1 分钟就学会的 vue 小技巧（真的一看就会）
原创
用户8983410
修改于 2021-09-19 20:29:32
修改于 2021-09-19 20:29:32
在日常开发时，经常会封装很多的组件方便复用，那么难免就有写样式相关组件，比如需要使用时传入颜色、高度等样式参数
PS: 文末彩蛋
问题来了：我们要怎么在样式中使用组件中接收的参数呢？或者说，我们要怎么在样式中使用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组件是不是简便了不少。你学会了么？赶快在项目中尝试一下吧～～
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录