Vue.js 更改v-for循环中子字符串的样式

我试图更改一些硬编码子字符串的颜色，这些子字符串可以出现在用于填充表的v-for循环中

我的循环如下所示：

              <tr v-for="(src, index) in contentArray.content" :key="src.id">
                <td class="myclass1" >{{ src.something1 }}</td>
                <td class="myclass2">{{ src.string }}</td>
              </tr>

我希望能够在单词“test”上应用颜色

我想要着色的子字符串不会出现在循环的每个字符串中

我有一个子集的多个硬编码的子字符串，我想颜色

我该怎么做

我试着用

split

方法玩另一个v-for循环，或者用

v-bind:class

玩，但我知道怎么做

---

谢谢

您可以按照您所说的拆分字符串，然后有条件地绑定类：

<td class="myclass2">
   <span v-for="substr in src.string.split(' ')" :class="{'someClass':substr==='test'}">
      {{substr}}
   </span>
</td>

{{substr}}

您可以按照您所说的拆分字符串，然后有条件地绑定类：

<td class="myclass2">
   <span v-for="substr in src.string.split(' ')" :class="{'someClass':substr==='test'}">
      {{substr}}
   </span>
</td>

{{substr}}

您可以拆分模板中的字符串，并有条件地仅为每个匹配的单词呈现

span

：

{{w}
{{w}

注意：此解决方案限制了短语的可搜索性（它只搜索单个单词）

或者，您可以使用一个计算属性，该属性仅用

span

包装目标单词：

声明一个（称为

“computedContent”

）预处理

contentArray.content的
字符串属性，用
包装所有目标词：

导出默认值{
计算：{
计算内容（）{
const searchWord=this.searchWord.trim（）
如果（！searchWord）返回this.contentArray.content
返回此.contentArray.content.map（x=>({
…x，
string:x.string.replace（新的RegExp（searchWord'ig'），w=>`${w}`）
}))
}
}
}

更新模板以改用此计算属性：

使用将

td

的

innerHTML

绑定到

src.string

：

在组件的

块中，选择

.keyword

以设置其样式：

.关键字{
字体系列：摩纳哥，无衬线；
字体大小：粗体；
颜色：蓝色；
}

---

您可以拆分模板中的字符串，并有条件地仅为每个匹配的单词呈现

span

：

{{w}
{{w}

注意：此解决方案限制了短语的可搜索性（它只搜索单个单词）

或者，您可以使用一个计算属性，该属性仅用

span

包装目标单词：

声明一个（称为

“computedContent”

）预处理

contentArray.content的
字符串属性，用
包装所有目标词：

导出默认值{
计算：{
计算内容（）{
const searchWord=this.searchWord.trim（）
如果（！searchWord）返回this.contentArray.content
返回此.contentArray.content.map（x=>({
…x，
string:x.string.replace（新的RegExp（searchWord'ig'），w=>`${w}`）
}))
}
}
}

更新模板以改用此计算属性：

使用将

td

的

innerHTML

绑定到

src.string

：

在组件的

块中，选择

.keyword

以设置其样式：

.关键字{
字体系列：摩纳哥，无衬线；
字体大小：粗体；
颜色：蓝色；
}

{{src.something1}
{{src.string.includes（'test'）？src.string.replace（'test'，`${}'）：src.string}

您可以使用.includes（）检查要更改的单词，并将该单词替换为。使用所需的html标记和类替换（） {{src.something1} {{src.string.includes（'test'）？src.string.replace（'test'，`${}'）：src.string} 您可以使用.includes（）检查要更改的单词，并将该单词替换为。替换（）为所需的html标记和类

<tr v-for="(src, index) in contentArray.content" :key="src.id">
  <td class="myclass1" >{{ src.something1 }}</td>
  <td class="myclass2">
{{ src.string.includes('test') ? src.string.replace('test', `${<span :class={color: 'yourColor'}></span>}`) : src.string }}
  </td>
</tr>