如何在HTML的class中使用prop？实现item.title与quiz类拼接

根据你提供的代码示例，要把item.title这个属性值和已有的quiz类拼接，不同模板/框架语法的实现方式如下：

1. Vue 模板语法 #

推荐用数组语法，可读性更强：

• 基础数组方式：

<textarea 
  class="form-control" 
  :class="['quiz', item.title]" 
  id="exampleFormControlTextarea1" 
  rows="3"
></textarea>

如果item.title可能为空，可添加条件过滤空值：

<textarea 
  class="form-control" 
  :class="['quiz', item.title ? item.title : '']" 
  id="exampleFormControlTextarea1" 
  rows="3"
></textarea>

• 字符串拼接方式：

<textarea 
  class="form-control quiz {{ item.title }}" 
  id="exampleFormControlTextarea1" 
  rows="3"
></textarea>

2. React JSX 语法 #

使用ES6模板字符串拼接：

<textarea 
  className={`form-control quiz ${item.title}`} 
  id="exampleFormControlTextarea1" 
  rows="3"
></textarea>

处理空值的写法：

<textarea 
  className={`form-control quiz ${item.title || ''}`} 
  id="exampleFormControlTextarea1" 
  rows="3"
></textarea>

3. 原生模板引擎（如EJS） #

直接用模板语法插入动态值：

<textarea 
  class="form-control quiz <%= item.title %>" 
  id="exampleFormControlTextarea1" 
  rows="3"
></textarea>

核心逻辑是将动态属性item.title合理插入到class属性的字符串中，注意匹配你使用的模板/框架语法规则，避免出现语法错误。

内容的提问来源于stack exchange，提问作者Raja Chohan