vue在页面随机显示5本图书，后面加上已读未读的复选框，点击已读变为绿色，未读变为红色

为了在Vue页面上随机显示5本书，并附带可切换的“已读”、“未读”复选框，你可以创建一个列表式组件，例如图书卡片，然后利用Vue的v-for指令和条件渲染来达到这个效果。首先，你需要创建一个数组来模拟5本书的数据：

<template>
  <div id="books">
    <ul>
      <li v-for="(book, index) in books" :key="index">
        <h3>{{ book.title }}</h3>
        <input type="checkbox" v-model="book.read" @change="updateColor(index)">
        <span :style="{ color: book.read ? 'green' : 'red' }">已读: {{ book.read ? '已读' : '未读' }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { title: '...', read: false },
        { title: '...', read: false },
        { title: '...', read: false },
        { title: '...', read: false },
        { title: '...', read: false }
      ]
    };
  },
  methods: {
    updateColor(index) {
      this.books[index].read = !this.books[index].read;
    }
  }
};
</script>

在上述代码中，`v-model`绑定复选框的状态，当复选框状态改变时，`updateColor`方法会被触发，更改相应图书对象的`read`属性以及颜色。