如何在 vue.js 中绑定类？答案

【问题标题】：How to bind classes in vue.js?如何在 vue.js 中绑定类？
【发布时间】：2020-10-01 04:57:04
【问题描述】：

我想了解 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>

【问题讨论】：

vuejs.org/v2/guide/class-and-style.html#Object-Syntax 这应该对你有帮助！！

标签： typescript vue.js nuxt.js vuetify.js

【解决方案1】：

我不需要下面的“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>

【讨论】：