在 Vue JS 3 CSS 类中使用模板变量

Question

我无法找出在 CSS 内联样式中使用 vue 函数返回的变量的最佳方法，在本例中为“宽度”样式。

我有 2 个变量返回到模板，我可以使用 {{}} 语法，但不能作为 CSS 样式。

这很好用：

Total Staked {{ gems }}/{{ size }} ({{
              Math.round((gems / size) * 100)
            }}%)

渲染时看起来像这样：总赌注 200/350 (57%)

我想将计算出的百分比 (57%) 放入 css 内联样式中，如下所示：

<div class="bg-black h-2 rounded-md text-white" style="width: 57%"></div>

其中宽度：57% 是动态填充的。

我正在使用带有 Tailwind 的 Vue 3 CSS

这是一个代码笔：https://codepen.io/johnwinsor/pen/RwxvdZZ

谢谢！

Answer 1

您可以创建计算属性并绑定您的样式：

new Vue({
  el: "#app",
  data() {
    return {
      gems: 300,
      size: 350
    };
  },
  computed: {
    wid() {
      return Math.round((this.gems / this.size) * 100)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="app">
  <div>
<!--     Thermometer -->
    <div class="w-2/3 h-2 pl-5 pr-5 m-auto">
        <div class="w-full h-2 mt-6 mb-2 bg-red-500 rounded-md">
           <div class="bg-black h-2 rounded-md text-white" :style="`width: ${wid}%`"></div>
        </div>
    </div>
<!--     Caption -->
    <div class="flex flex-wrap justify-center align-center pb-5">
      <p class="text-red-600">
        Total Staked {{ gems }}/{{ size }} ({{ wid }}%)
      </p>
    </div>
  </div>
</div>

在 Vue JS 3 CSS 类中使用模板变量

Using Template Variables in CSS Classes in Vue JS 3

javascript

css

vue.js

tailwind-css

vuejs3

在 Vue JS 3 CSS 类 中使用模板变量

Using Template Variables in CSS Classes in Vue JS 3

javascript

css

vue.js

tailwind-css

vuejs3

在 Vue JS 3 CSS 类中使用模板变量