在 v-for 循环中更改子字符串的样式

Question

我正在尝试更改一些硬编码子字符串的颜色，这些子字符串可以出现在用于填充 table.

的 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>

假设我想在 src.string 的子字符串上应用特定颜色。

例如，如果 src.string 是：

This is a test

我希望能够在单词 'test' 上应用颜色。

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

我有多个硬编码子字符串的子集，我想对其进行着色。

我该怎么做？

我尝试使用 split 方法或 v-bind:class 来玩另一个 v-for 循环，但我知道如何做到这一点...

谢谢

Answer 1

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

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

Answer 2

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

<template v-for="w in src.string.split(/\s+/)">
  <span class="keyword" v-if="w === searchWord">{{w}} </span>
  <template v-else>{{w}} </template>
</template>

demo 1

请注意，此解决方案限制了短语的可搜索性（它仅搜索单个单词）。

或者，您可以使用计算的属性，它只用 span:

包装目标词

声明一个computed property（称为"computedContent"）预处理contentArray.content的string属性，用[=20=包裹所有目标词]:

export default {
  computed: {
    computedContent() {
      const searchWord = this.searchWord.trim()
      if (!searchWord) return this.contentArray.content

      return this.contentArray.content.map(x => ({
        ...x,
        string: x.string.replace(new RegExp(searchWord, 'ig'), w => `<span class="keyword">${w}</span>`)
      }))
    }
  }
}

更新模板以使用此计算的属性代替：

<tr v-for="(src, index) in computedContent" :key="src.id">

使用v-html directive绑定td的innerHTML到src.string:
```
<td class="myclass2" v-html="src.string"></td>
```

在组件的 <style> 块中，select .keyword 设置样式：

<style>
.keyword {
  font-family: Monaco, sans-serif;
  font-weight: bold;
  color: blue;
}
</style>

demo 2

Answer 3

<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>

您可以使用 .includes() 检查您要更改的词，并将该词替换为 .replace() html 标签和 class 你想要的

在 v-for 循环中更改子字符串的样式

Change the style of a substring in a v-for loop

html-table

vue.js

vuejs2