Is there a better solution than `v-html` in vue

Question

I have a Vue component. He will show a text array circularly. In the text, some string has a special style. I can use the v-html attribute. Is there a better way?

<script setup>
import { ref } from "vue";
const data1 = [
  "An approachable, performant and versatile framework for building web user interfaces.",
  "The library for web and native user interfaces",
];

const data2 = [
  "An approachable, <b>performant</b> and versatile framework for building web user interfaces.",
  "The library for web and <b>native</b> user interfaces",
];
</script>

<template>
  <div class="data1">
    <p v-for="(item, index) in data1" :key="index">{{ item }}</p>
  </div>
  <div class="data2">
    <p id="data2" v-for="(item, index) in data2" :key="index" v-html="item"></p>
  </div>
</template>

<style scoped>
:deep(.data2 > b) {
  font-weight: 700;
}
</style>

Answer 1

Use interpolation for rendering.

<script setup>
    import { ref } from "vue";
    const data1 = [
      { part1: "An approachable,", part2: "performant", part3: "and versatile framework for building web user interfaces." },
      { part1: "The library for web and", part2: "native", part3:"user interfaces" },
    ];
</script>

<template>
  <div class="data">
    <p v-for="(item, index) in data1" :key="index">
      {{ item.part1 }} <b>{{ item.part2 }}</b> {{ item.part3 }}
    </p>
  </div>
</template>