Поскольку я изучаю VUEJS, я застрял в том месте, где мне нужно выделить предложение жирным шрифтом внутри <li>, которое соответствует тексту из базы данных.

Вот код:

              <div>
                i. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .
                Your answer?
                <ul>
                  Answer:
                  <li>option 1</li>
                  <li>option 2</li>
                  <li>option 3</li>
                </ul>
              </div>

Я получаю значение из базы данных, и я получаю его, используя {{anwer.option}}, и я хочу показать в этом, что если {{anwer.option.option1}} является вариантом 1, тогда необходимо показать текущий вариант вместе с другими вариантами. Например:

            <div>
            i. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .
            Your answer?
            <ul>
              Answer:
             <strong><li>option 1</li></strong>
              <li>option 2</li>
              <li>option 3</li>
            </ul>
          </div>
0
Pheonix 2 Ноя 2020 в 08:23

1 ответ

Лучший ответ

Используйте условный класс и стиль, https://vuejs.org/v2/guide/ class-and-style.html:

<template>
<li :class="{bold-font: ifMatch('option 1')}">option 1</li>
</template>
<script>
methods:{
    ifMatch(option){
        return this.anwer.option === option
    }
}
</script>
<style>
.bold-font:{
    font-weight: bolder;
}
</style>
2
Hank X 2 Ноя 2020 в 05:31