Is it possible to achieve partial text stylization in Vue using Nuxt.js?

Question

Is it possible to achieve partial text stylization in Vue using Nuxt.js?

We're currently developing a Vue application

Is there a way to style text partially, similar to this example?

Although creating exact constraints from ellipses may not be possible, the functionality could still be achieved procedurally.

html css vue.js web nuxt.js

Answer 1

Answer №1

If you're looking to style specific words, you can use the following code snippet as a guide:

new Vue({
  el: "#demo",
  data() {
    return {
      messages: { unstyled: 'no styling!', styled: 'platformy dobrix del!' },
    };
  },
  methods: {
    words(string) {
      return string.split(/\s+/);
    },
    isMarked(string) {
      return /dobrix/i.test(string);
    },
  },
})

.marked {
  color: red;
  position:relative;
}
.marked::before {
  content: "";
  background: turquoise;
  position: absolute;
  height: 20px;
  width: 92%;
  top: 20px;
  z-index: -1;
  border-radius: 10px;
}
*{
  font-weight: 800;
  font-size: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="container">
    <div v-for="(value, name) in messages" :key="name">
      <span v-for="(word, index) in words(value)" :key="index">
        <span v-if="isMarked(word)" class="marked">{{ word }} </span>
        <span v-else>{{ word }} </span>
      </span>
    </div>
  </div>
</div>

Answer 2

If you're looking to style specific words, you can use the following code snippet as a guide:

new Vue({
  el: "#demo",
  data() {
    return {
      messages: { unstyled: 'no styling!', styled: 'platformy dobrix del!' },
    };
  },
  methods: {
    words(string) {
      return string.split(/\s+/);
    },
    isMarked(string) {
      return /dobrix/i.test(string);
    },
  },
})

.marked {
  color: red;
  position:relative;
}
.marked::before {
  content: "";
  background: turquoise;
  position: absolute;
  height: 20px;
  width: 92%;
  top: 20px;
  z-index: -1;
  border-radius: 10px;
}
*{
  font-weight: 800;
  font-size: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="container">
    <div v-for="(value, name) in messages" :key="name">
      <span v-for="(word, index) in words(value)" :key="index">
        <span v-if="isMarked(word)" class="marked">{{ word }} </span>
        <span v-else>{{ word }} </span>
      </span>
    </div>
  </div>
</div>

Is it possible to achieve partial text stylization in Vue using Nuxt.js?

Answer №1

Similar questions

Building a table using a JSON object in a React component

Tips for eliminating corner gaps in css

Preview multiple images while uploading with V-for in Vue JS

Placing an image above text in a table cell and making it hover

Using vue-i18n in Nuxt.js: a guide for utilizing it outside components

Using Three.JS 'OrbitControls' in VueJS application results in a black screen appearing?

Having trouble displaying the fancybox helper buttons

The function of jQuery .click() not triggering on elements within msDropDown

I am struggling to style a form effectively with CSS grid

JavaScript is utilized to update HTML content through an Ajax request, but unfortunately, the styling is

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Can the text within the <h3> element be displayed on top of the inline image without the use of <span> tags or background images?

Why does Node.js prompt an error when using document.querySelector? Is there an alternative method to document when utilizing express in my project?

Is there a way to eliminate unknown white gaps in the content?

elevate design css/widget/components

Revamp every single hyperlink that ends in .html

Whenever I try to install the PostCSS plugin in Tailwind CSS and run "npm run build," an error always pops up. I've attempted to troubleshoot multiple times without success. Any suggestions on what I should try next?

Show the modal content in Bootstrap on mobile and tablet screens

Is it possible to modify the appearance of the element that was just clicked on?

Is there a way to effectively rotate an image according to the position of my cursor, ensuring it functions correctly?