Question

我的vue组件是这样的：

<template>
    <a class="btn btn-block" :class="[response == 'responseFound' ? ' btn-yellow' : ' btn-default']">
    ...
    </a>
 </template>

它有效

但是，我想将它合并为一个类

我试着这样：

<template>
    <a :class="'btn' [response == 'responseFound' ? ' btn-yellow' : ' btn-default'] ' btn-block'">
    ...
    </a>
 </template>

但它不起作用

我该如何解决？

Answer 1

里面的一切：class或v-bind：class是一个表达式。所以：

<template>
    <a :class="'btn' + ( response == 'responseFound' ? ' btn-yellow' : ' btn-default') + ' btn-block'">
    ...
    </a>
 </template>

Answer 2

您还可以在数组中组合不同的绑定样式：

const { pipe, map, get } = require('rubico')

// page => firebase_folders_response
const getFirebaseFolders = page => firebase.storage().ref(page).listAll()

// folderRef => [{ url, name }]
const getAllFilesCallback = pipe([
  folderRef => folderRef.listAll(),
  get('items'),
  map(file => pipe([
    file => file.getDownloadURL(),
    url => ({ url, name: file.name }),
  ])(file)),
])

// [[...], [...], [...], ...] => [...]
const flatten = arr => arr.flat(1)

// page => [files]
const getAllFilesFunction = pipe([
  getFirebaseFolders,
  // page -> firebase_folders_response

  get('prefixes'),
  // firebase_folders_response -> [folderRef]

  map(getAllFilesCallback),
  // [folderRef] => [[{ url, name }, ...], [{ url, name }, ...], ...]

  flatten,
  // [[{ url, name }, ...], [{ url, name }, ...], ...] => [{ url, name }, { url, name }, ...]
])

// then, in your class
// ...

  async getAllFiles(page) {
    return getAllFilesFunction(page)
  }

如何将类与具有条件的类结合起来？ vue.js 2

2 个答案: