Typescript 如何在vue.js中绑定类？

我想了解Vue.js中的类和样式绑定。 所以我制作了一个小应用程序，但我无法获得预期的行为。 一个显示点的简单应用程序， 我想根据主题点改变文本颜色。 但所有行的颜色都变了。 有人帮我吗

    <template>
  <div>
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
        class="failure"
        :class="{ failure: item.point < 60 }"
      >
        >ID:{{item.id}}/Subject:{{item.subject}}/Point:{{item.point}}
        <span v-if="item.point < 60"
          >you need to take a test! one more time!</span
        >
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue {
  list = [
    { id: 1, subject: 'Society', point: 40 },
    { id: 2, subject: 'Math', point: 80 },
    { id: 1, subject: 'Science', point: 70 },
  ]
}
</script>
<style scoped>
.failure {
  color: red;
}
</style>

>ID:{{item.ID}}/主题：{{item.Subject}}/点：{{item.Point}
你需要做个测试！再来一次！


从“nuxt属性装饰器”导入{Component，Vue}
@组件（{}）
导出默认类扩展Vue{
列表=[
{id:1，主题：'社会'，第40点}，
{id:2，主题：“数学”，分值：80}，
{id:1，主题：'科学'，点：70}，
]
}
.失败{
颜色：红色；
}

我不需要下面的“class='failure'”

    <template>
  <div>
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
        :class="{ failure: item.point < 60 }"
      >
        >ID:{{item.id}}/Subject:{{item.subject}}/Point:{{item.point}}
        <span v-if="item.point < 60"
          >you need to take a test! one more time!</span
        >
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue {
  list = [
    { id: 1, subject: 'Society', point: 40 },
    { id: 2, subject: 'Math', point: 80 },
    { id: 1, subject: 'Science', point: 70 },
  ]
}
</script>
<style scoped>
.failure {
  color: red;
}
</style>

>ID:{{item.ID}}/主题：{{item.Subject}}/点：{{item.Point}
你需要做个测试！再来一次！


从“nuxt属性装饰器”导入{Component，Vue}
@组件（{}）
导出默认类扩展Vue{
列表=[
{id:1，主题：'社会'，第40点}，
{id:2，主题：“数学”，分值：80}，
{id:1，主题：'科学'，点：70}，
]
}
.失败{
颜色：红色；
}

这应该对您有所帮助！！