时间戳

首页 > 解决方案 > 在样式中使用 Vue 变量

javascript - 在样式中使用 Vue 变量

问题描述

<style>所以我想在组件底部的标签中使用一些 Vue 数据/属性变量。

所以假设我有一个这样的组件：

<template>
  <div class="cl"></div>
</template>
<script>
export default {
  data () {
    return {
      val: '30px'
    }
  } 
..
}
</script>
<style>
.cl p{
  height: 30px;
}
</style>

我想以某种方式使用val数据变量，<style></style>以便我可以这样设置它。

现在我知道这样做<div :style="{'height':val}"></div>是您使用 vue 道具/变量进行样式设置的方式。但这只会设置该div的样式。我希望我的 div 中的所有p标签或任何标签都具有某种样式，而这只能通过将其声明为类来完成。

还有另一种方法，通过定义类并使其成为活动（真/假）值，例如 : <div :class="{'cl': someBoolVariable}"></div>。但是，如果我希望它足够动态以根据从父组件传递的一些计算/值来改变高度怎么办？

如果可能的话，我需要这样的东西：

<style>
.cl p {
  height: val;
}
</style>

如果可能的话，任何人都可以建议这样做的方法吗？或者一个简单的解决方法来实现这一点？

标签： javascripthtmlcssvue.js

解决方案

您可以在主元素上使用CSS 变量来实现它div

<template>
  <div class="cl" :style="'--p-height: ' + val"></div>
</template>

<script>
  export default {
    data() {
      return {
        val: '30px'
      }
    } 
  }
</script>

<style>
.cl p {
  height: var(--p-height);
}
</style>

这是一个jsfiddle

推荐阅读