如何用尾风在NUXT3中动态更改类别？

Question

我是Nuxt3和tailwind的新手，我正在研究一个动态呈现4个细分市场的部分。

<section class="howItWorks">
 <div class="clientchoice__desc">
   <h4 class="mb-2">{{item.title}}</h4>
   <p class="mb-4">{{item.desc}}</p>
   <h2 class="mt-44 number">{{item.number}}</h2>
 </div>
</section>

动态渲染的数据来自这里：

export default {
  data() {
    return {
     howItWorks: [
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '1'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '2'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '3'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '4'
        },
      ],
   }
 }
}

我想对描述下出现的每个数字（1,2,3和4）具有不同的样式。例如具有不同的颜色等

。使CSS类动态变化的最佳方法是什么？

谢谢。

Answer 1

我们可以将一个对象传递到：类（v-bind：class的简短）到动态切换类

<div :class="{ active: isActive }"></div>

的语法意味着活动类的存在将取决于数据属性的真实性。

ISACTIVE可以是计算的属性，甚至可以是一种方法，只要它返回真实值活动类，将设置为元素。从Vue官方 doc doc << /a>

对于您的情况，您可以在howitworks数组上运行v-for循环，并且每个项目都使用计算属性或方法将特定类返回基于项目的动态呈现。下面给出了一个可能的演示代码，即如何在多种方式中动态添加类。
To see how this below code's outcome go to this vue playground link

<template>
<section class="howItWorks" v-for="(item,index) in howItWorks" :key="index">
 <div class="clientchoice__desc">
   <h4 class="mb-2">{{item.title}}</h4>
   <p class="mb-4">{{item.desc}}</p>
   <h2 class="mt-44 number" :class="setClass(item,index)">{{item.number}}</h2>
 </div>
</section>
</template>  
<script>
export default {
  data() {
    return {
     howItWorks: [
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '1'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '2'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '3'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '4'
        },
      ],
   }
 },
 methods:{
   setClass(item,index){
     if(item.number == "1") return "red";
     else if(item.number=="2") return "green";
     else if(item.number =="3") return "yellow";
     else return "blue";
   }
 }
}
</script>

<style>
  .red{
    color: red;
  }
  .green{
    color: green;
  }
  .yellow{
    color: yellow;
  }
  .blue{
    color:blue;
  }
  
</style>

Answer 2

您可以将V-Bind：class =“”与class =“”一起使用。
这意味着您可以创建一个变量并在需要时更改它：

<!-- like this-->
<div class="p-8" :class="your_variable"></div>
<script setup>
//let your_variable = ref('');
//onMounted(()=>{your_variable.value = 'bg-blue-600'})
</script>