动态 class 在 nuxtjs/vuejs 中与 tailwind classes 绑定

Question

我正在根据某个计时器将 css 类分配给 div。

s0 can be 0 - 5

这个作业（如下）工作正常，但感觉它在编写和性能方面都有很大的开销。还有另一种方法可以在nuxt中动态分配css 类吗？

例如直接在模板上写class="-mt-{s0*8}"？为什么需要 return 的布尔值？我错过了什么吗？

  <template> 
    <div class="secs-0" :class='{"-mt-8": oct(s0, 8),
                                      "-mt-16": oct(s0, 16),
                                      "-mt-24": oct(s0, 24),
                                      "-mt-32": oct(s0, 32),
                                      "-mt-40": oct(s0, 40)}'>

...



<script>
    ...
    methods: {
         oct(o, p) {
          return o*8 == p
         }
    },
    ...

Answer 1

我需要查看 Class 和 vuejs.org 的样式绑定，而不是 nuxtjs.org（我在那里什么也没找到 :-)

https://vuejs.org/v2/guide/class-and-style.html

执行此操作的正确方法是使用数组语法“['']”和@tao 在评论中显示的字符串连接

 <template> 
    <div class="secs-0" :class="['-mt-'+h0*8]">

@tao 也做了一个合适的jsfiddle，谢谢！

https://jsfiddle.net/websiter/f5zdstex/

动态 class 在 nuxtjs/vuejs 中与 tailwind classes 绑定

dynamic class binding in nuxtjs/vuejs with tailwind classes

vue.js

vue-component

tailwind-css

nuxtjs