vue.js - 使与 VUEJS 中的数据匹配的选项中的文本加粗

Question

因为我正在学习 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>

标签： vue.jsvuejs2

Answer 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>