gpt4 book ai didi

javascript - 使用 vue.js 创建搜索框

转载 作者:行者123 更新时间:2023-12-04 08:25:58 25 4
gpt4 key购买 nike

我想为搜索框添加功能,以在页面上搜索输入的电影的当前卡片,但我在网上找到的所有其他示例和解决方案似乎对我不起作用。
这是 HTML 的正文:

<body>
<div id="app">
<div class="row pt-3">
<div class="col">
<input type="text" class="form-control" v-model="search" placeholder="Search Movies">
</div>
<div class="col-md-auto">
<button type="button" class="btn btn-primary" id="search">&nbsp;&nbsp; Go! &nbsp;&nbsp;</button>
</div>
</div>
<div class="row text-center pt-3">
<div v-for="movie in movies" class="card" style="width: 18rem;">
<img :src="movie.Poster" class="card-img-top" alt="img">
<div class="card-body">
<h5 class="card-title">{{ movie.Title }}</h5>
<p class="card-text">{{ movie.Year }}</p>
<a href="#" class="btn btn-primary">View Movie</a>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
这是 JS 文件:
new Vue({
el: '#app',
data: {
movies: [],
search: '',
},
created() {
var vm = this
axios.get('https://www.omdbapi.com/?s=Harry+Potter&apikey=a9018efb')
.then(function(response) {
vm.movies = response.data.Search
})
}
})

最佳答案

而不是循环遍历 movies ,创建一组计算的过滤数据以循环。例如,如果您正在搜索标题:

computed: {
searchedMovies() {
return this.movies.filter(movie => {
return movie.Title.toLowerCase().includes(this.search.toLowerCase());
})
}
}
循环这个:
<div v-for="movie in searchedMovies" :key="movie.Title">
...
</div>
当您没有搜索任何内容时,这将返回所有电影。

关于javascript - 使用 vue.js 创建搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65258755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com