nuxtjs/vuejs 中带有尾风类的动态类绑定

Posted

技术标签:

【中文标题】nuxtjs/vuejs 中带有尾风类的动态类绑定【英文标题】:dynamic class binding in nuxtjs/vuejs with tailwind classes 【发布时间】:2021-04-26 21:33:57 【问题描述】:

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

s0 可以是 0 - 5

这个作业(如下)工作正常,但感觉在写作和性能上都有很多开销。是否有另一种方法可以在 nuxt 中动态分配 css 类?

例如直接在模板上写class="-mt-s0*8"?为什么需要返回布尔值?我错过了什么吗?

  <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
         
    ,
    ...

【问题讨论】:

【参考方案1】:

我需要查看 vuejs.org 上的 Class 和 Style Bindings,而不是 nuxtjs.org(我什么也没找到 :-)

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

正确的方法是使用数组语法“['']”和字符串连接,如 cmets 中显示的 @tao

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

@tao 也做了一个合适的 jsfiddle,谢谢!

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

【讨论】:

您可能会发现这种语法很方便::class="['-mt-' + s0 * 8]" 这是tiny toy。

以上是关于nuxtjs/vuejs 中带有尾风类的动态类绑定的主要内容,如果未能解决你的问题,请参考以下文章

python tips:类的动态绑定

将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致服务器重新加载时未定义错误“CodeMirror”

Nuxtjs/Vuejs 表单数据在导航到不同的路线并使用浏览器后退按钮返回上一个路线时丢失

如何在验证方法 nuxtjs vuejs jest 中对代码进行单元测试

关于 Spring 中带的这个类 ResponseEntity 类的使用

关于 Spring 中带的这个类 ResponseEntity 类的使用