Question

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

所以说我有一个像这样的组件：

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

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

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

还有另一种方法可以通过定义类并将其设置为有效（真/假）值来实现，例如：<div :class="{'cl': someBoolVariable}"></div>。但是，如果我希望它具有足够的动态性，以基于从父组件传递的某些计算/值来更改 height ，该怎么办？

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

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

如果可能的话，有人可以建议这样做吗？还是一个简单的解决方法来实现这一目标？

Answer 1

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

<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

在样式中使用Vue变量

1 个答案: