Using Javascript to create bold text within a string

Question

Using Javascript to create bold text within a string

I have noticed that many people are asking about this issue, but it seems like a clear and simple answer is hard to come by. Currently, I am working with Vue and trying to display text from an object in a component. My goal is to highlight the price portion of the string in bold while keeping the rest of the text unchanged. How can I achieve this specific formatting for a part of the string?

premiumContent: [
    {
       infoText: "Get this for only €2,99 per month:",
    },
]

javascript vue.js ecmascript-6 vuejs2

Answer 1

Answer №1

To modify the infoText, you can wrap the price in <b> tags:

export default {
  data() {
    return {
      premiumContent: [
        {
          infoText: "Grab this deal for just <b>€2,99</b> per month:",
        },
      ]
    }
  }
}

Afterwards, you can add it to an element's innerHTML using the v-html directive:

<div v-for="content of premiumContent"
     v-html="content.infoText">
</div>

Check out this demo

Answer 2

To modify the infoText, you can wrap the price in <b> tags:

export default {
  data() {
    return {
      premiumContent: [
        {
          infoText: "Grab this deal for just <b>€2,99</b> per month:",
        },
      ]
    }
  }
}

Afterwards, you can add it to an element's innerHTML using the v-html directive:

<div v-for="content of premiumContent"
     v-html="content.infoText">
</div>

Check out this demo

Using Javascript to create bold text within a string

Answer №1

Similar questions

When updating a form, it is essential to display select box data from the database effortlessly. It is also important to ensure that the select box data's id is

Regular expressions are used for validation purposes

Developing various VueJS TypeScript projects utilizing a shared library

The syntax in JavaScript of (0, fn)(args) is used to call

Tips for displaying autocomplete suggestions as clickable links?

Tips on obtaining the response (in JSON format) in your console when accessing a URL

What is the best way to dynamically load a personalized JavaScript file for individual users depending on their PHP login credentials?

Inquiring about the process of registration with Laravel Vue components

Employing jQuery, how can one assign attributes to appended HTML and store them

Select a file and upload an image promptly after it is chosen

Dealing with click events on layers with z-index positioning

Getting an input value dynamically in a React variable when there is a change in the input field

What is the best way to incorporate a mute/unmute button into this automatically playing audio?

Using AJAX to dynamically populate PHP form inputs from HTML

I seem to be having trouble using my markers on my istamap

Creating reactive behavior with a Promise initiated within a constructor - A guide

Create an instance using the window object in JavaScript

Adjusting the backdrop hues

Terminate a browser tab with the click of an HTML button

Is it wrong to use <match v-for='match in matches' v-bind:match='match'></match>? Am I allowed to incorporate the match variable from the v-for loop into the v-bind attribute on the