[Vuejs]-How to bind classes in vue.js?

by

0👍

✅

I don’t need "class=’failure’" just below.

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

Leave a comment