intelligent-bookshelf/src/views/module/bookListItem.vue

<template>
  <div>
    <div v-for="item in listData" :key="item.ranking" class="list-item">
      <div class="book-img">
        <img :src="item.cover" :onerror="defaultImg">
      </div>
      <div class="book-info">
        <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
        <p class="book-author">{{ item.nbAuthor }}</p>
        <div v-if="!isNewBook" class="book-num">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-remen" />
          </svg>
          <p>{{ item.num }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BookListItem',
  props: {
    listData: {
      type: Array,
      default: function() {
        return []
      }
    },
    isOtherBook: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    isNewBook: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
    }
  },
  watch: {
    listData: function(newValue, oldValue) {
    },
    isOtherBook: function(newValue, oldValue) {
    },
    isNewBook: function(newValue, oldValue) {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>