Vue 3 中使用 v-if 筛选 books 数组价格

根据您提供的 Vue 3 的 data 数据，如果您想在 v-if 中引用 books 数组中的 price 值，可以按照以下方式进行操作：

<template>
  <div>
    <div v-for="book in books" :key="book.id">
      <div v-if="book.price > 50">
        价格大于 50 的书籍：{{ book.name }}
      </div>
      <div v-else>
        价格小于等于 50 的书籍：{{ book.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎学习 vue 框架',
      current: 'home',
      list: ['home', 'news', 'projects', 'services', 'contact'],
      books: [
        { id: 1, name: 'VC++ programming', author: 'Jack', price: 88 },
        { id: 2, name: '老人与海', author: 'Peter', price: 60 },
        { id: 3, name: '简爱', author: 'Alice', price: 100 },
      ],
      newBook: {
        id: 0,
        name: '',
        author: '',
        price: 0,
      },
    };
  },
};
</script>

在上述示例中，我们使用 v-for 迭代 books 数组，并根据 book.price 的值进行条件判断。如果 book.price 大于 50，我们显示书籍名称并指示价格大于 50；否则，我们显示书籍名称并指示价格小于等于 50。

请根据您的具体需求和条件逻辑进行相应的修改。