在Vue.js中，我们可以使用指令来实现条件性的渲染和循环语句。以下是Vue.js中条件语句和循环语句的示例代码：

<template>
  <div>
    <!-- 条件渲染 -->
    <div v-if="showMessage">Hello, Vue.js!</div>
    <div v-else>Goodbye, Vue.js!</div>
 
    <!-- 循环渲染 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showMessage: true,
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>

在这个例子中，v-if和v-else指令用于条件渲染，而v-for指令用于基于数组中的元素进行循环渲染。:key属性是给Vue.js的虚拟DOM算法提供的提示，用于追踪每个节点的身份，从而进行高效的更新操作。

// 假设我们已经有了一个图书列表数组和一个用于显示图书的函数
let books = [
    { id: 1, title: 'Book 1', author: 'Author 1', year: 2020 },
    // ... 其他图书对象
];
 
function displayBooks(bookList) {
    // 实现图书列表的DOM操作显示
}
 
// 添加图书的函数
function addBook(book) {
    book.id = generateId(); // 假设generateId函数用于生成唯一的id
    books.push(book);
    displayBooks(books);
}
 
// 删除图书的函数
function deleteBook(bookId) {
    books = books.filter(book => book.id !== bookId);
    displayBooks(books);
}
 
// 修改图书的函数
function updateBook(book) {
    books = books.map(b => b.id === book.id ? book : b);
    displayBooks(books);
}
 
// 查询图书的函数
function searchBooks(query) {
    const results = books.filter(
        book => book.title.toLowerCase().includes(query.toLowerCase())
    );
    displayBooks(results);
}
 
// 假设我们有一个按钮和一个输入框用于触发添加图书
document.getElementById('add-book').addEventListener('click', () => {
    const title = document.getElementById('book-title').value;
    const author = document.getElementById('book-author').value;
    const year = parseInt(document.getElementById('book-year').value, 10);
    addBook({ title, author, year });
});
 
// 假设我们有一个按钮用于触发删除图书操作
document.getElementById('delete-book').addEventListener('click', () => {
    const bookId = parseInt(document.getElementById('book-id').value, 10);
    deleteBook(bookId);
});
 
// 假设我们有一个输入框和按钮用于触发修改图书操作
document.getElementById('update-book').addEventListener('click', () => {
    const bookId = parseInt(document.getElementById('book-id').value, 10);
    const title = document.getElementById('book-title').value;
    const author = document.getElementById('book-author').value;
    const year = parseInt(document.getElementById('book-year').value, 10);
    updateBook({ id: bookId, title, author, year });
});
 
// 假设我们有一个输入框和按钮用于触发查询图书操作
document.getElementById('search-book').addEventListener('click', () => {
    const query = document.getElementById('search-input').value;
    searchBooks(query);
});

这个代码示例提供了一个简化的版本，用于演示如何实现图书管理的基本功能。代码中包含了添加、删除、修改和搜索图书的函数，以及与HTML元素的交互，但没有实现实际的DOM操作。实际应用中，你需要根据具体的HTML结构和需求来实现这些函数中的DOM操作部分。