title: How to add a html class in a Vue data string?
body: <p>I have a component in Vue and I have some hard coded data. I need to add the class <code>font-bold uppercase</code> to a word in the string. </p>
  
  <p>How would I achieve this in Vue?</p>
  
  <p>In the below code, inside <code>data &gt; need</code> you will see the word <code>HOPE</code>. I need this word to have the class.</p>
  
  <pre><code>export default {
  
      data: function() {
          return {
              locations: [{
                      id: 1,
                      name: 'Example',
                      need: "Lorem ipsum HOPE dolor sit amet.",
                  },
                  {
                      id: 2,
                      name: 'Example 2',
                      need: "Morbi et lobortis ante, HOPE eu viverra quam.",
  
                  },
  
                ]
              }
          }
      }
  
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div v-for="(location, index) in locations"&gt;
              &lt;p class="text-base text-navy-500 leading-tight mt-2"&gt;
              {{ location.need }}
              &lt;/p&gt;
  ...
  </code></pre>
  
  <p>I tried using a method similar to this, but couldn't figure it out:
  I'm assumming I need a way to search and replace the word in the string...</p>
  
  <pre><code>methods: {
              highlight() {
                  if(!this.query) {
                      return this.content;
                  }
                  return this.content.replace(new RegExp(this.query, "HOPE"), match =&gt; {
                      return '&lt;span class="highlightText"&gt;' + match + '&lt;/span&gt;';
                  });
              }
  </code></pre>
  
  <p>Any help would be appreciated.</p>