vue如何在css样式种使用data中的变量

最新推荐文章于 2024-05-09 20:43:36 发布

wu_yans

最新推荐文章于 2024-05-09 20:43:36 发布

阅读量2.3k

点赞数 1

文章标签： css vue.js javascript

原文链接：https://blog.csdn.net/qq_38110572/article/details/116121628

版权

直接记下代码：

<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
    props: {
        height: {
            type: Number,
            default: 94,
        },
        whith: {
            type: Number,
            default: 200,
        },
    },
    computed: {
        styleVar() {
            return {
                '--box-width': this.whith + 'px',
                '--box-height': this.height + 'px'
            }
        }
    },
}
</script>
<style scoped>
.box {
  height: var(--box-height);
  width: var(--box-width);
  background: red;
}
</style>

这样就在vue中实现了在样式里使用js变量的方法，及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。以后，在封装一些需要动态传入样式参数的ui组件是不是简便了不少。