Блог

Поскольку я изучаю VUEJS, я застрял в месте, где мне нужно выделить предложение жирным шрифтом внутри a <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>
  

используйте условный класс и стиль, https://v2.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>