使用v-for循环渲染图书数组的信息,并根据书名进行模糊查询
时间: 2024-09-14 22:08:36 浏览: 48
在Vue.js中,如果你有一个包含图书信息的数组,你可以使用`v-for`指令来遍历并渲染每个图书。假设你的数组名为`books`,并且每个图书对象都有`title`属性,模糊查询可以借助JavaScript的`filter()`函数实现。下面是一个基本的示例:
```html
<div v-for="book in filteredBooks">
<h3>{{ book.title }}</h3>
<!-- 其他图书信息... -->
</div>
<script>
data() {
return {
books: [], // 初始化书籍数组
searchQuery: '', // 用户输入的搜索关键词
}
},
methods: {
filterBooks() {
this.filteredBooks = this.books.filter(book =>
book.title.toLowerCase().includes(this.searchQuery.toLowerCase())
);
},
handleSearch(e) {
this.searchQuery = e.target.value;
this.filterBooks();
},
},
mounted() {
// 初始化数据...
this.filterBooks(); // 第一次加载时对所有书籍进行过滤
},
<input type="text" v-model="searchQuery" @input="handleSearch"> <!-- 模糊查询输入框 -->
```
在这个例子中,每当用户在输入框中输入文本时,`handleSearch`方法会被调用,更新`filteredBooks`数组,只显示那些标题包含用户输入关键词的图书。
阅读全文