Vue.js - добавление html-тегов внутри строки в массив

#javascript #vue.js

Вопрос:

У меня есть массив строк в следующей форме:

 arr: [
"feature1 str1",
"feature2 str2",
"feature3 str3"
]

Моя цель — выделить часть этих строк с помощью <b> тега (например — «feature1 str1«). Кроме того, строки должны быть отображены внутри шаблона vue, например:

 <ul v-for="(feature, index) in arr" v-bind:key="index">
        <li>{{feature}}</li>
    </ul>

Я не получаю желаемого результата, поэтому «жирный текст» не отображается.

Если есть какое-либо решение или совет по устранению этой проблемы — заранее спасибо.

1. ты не получаешь того , чего хочешь … поскольку в вашем коде нет тега bold — каковы критерии того, какая часть строки выделена жирным шрифтом? так и есть … последнее слово? все, кроме второго слова? все, что начинается с str , все, что не является словом feature … Есть много возможностей

Ответ №1:

Как насчет этого?

 <ul v-for="(feature, index) in arr" v-bind:key="index">
  <li>{{feature.split(" ")[0]}} <b>{{feature.split(" ")[1]}}</b></li>
</ul>

это сработает, только если значение arr всегда равно 2 словам, разделенным пробелом, и вы хотите выделить 2-е слово.