一、个分内容简介

在使用vue开发时，钟学经常会封装很多的技巧组件方便复用，那么难免就有写样式相关组件，个分比如需要使用时传入颜色、钟学高度等样式参数。技巧

那么问题来了：我们要怎么在样式中使用组件中接收的个分参数呢?或者说，我们要怎么在样式中使用data中的IT技术网钟学变量呢?

二、代码演示

这个用法真的技巧简单，没什么其他的个分知识点，直接上代码：

<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定义变量的方式，将变量在行内注入，云南idc服务商技巧然后在style中使用var()获取我们在行内设置的个分数据即可。

三、钟学最后

以后，技巧在封装一些需要动态传入样式参数的ui组件是不是简便了不少。你学会了么?赶快在项目中尝试一下吧～～ 

源码库

(责任编辑：IT科技类资讯)