在 vue 中结合条件类和非条件类答案

【问题标题】：Combining conditional and non-conditional classes in vue在 vue 中结合条件类和非条件类
【发布时间】：2018-12-05 20:49:16
【问题描述】：

我需要使用 vue 参数中的值设置一个类。此外，我需要根据 vue 参数是否为某个值来有条件地设置一个类。是否可以将以下两个功能组合到一个课堂作业中？

<button :class="'btn btn-primary modal modal-' + modal.id" 
        :class="{'modal-active' : modal.active}">
</button>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

你可以通过使用数组来做到这一点：

   <div v-bind:class="[{'modal-active' : modal.active}, 'btn btn-primary modal modal-' + modal.id]"></div>

【讨论】：

【解决方案2】：

更现代的方法是使用computed 属性来构造类名数组：

<template>
  <button :class="classNames"></button>
</template>

<script setup>
const classNames = computed(() => ['btn', 'btn-primary', 'modal', `modal-${model.id}`, modal.active && 'modal-active']);
</script>

【讨论】：