蓝桥杯-绝美宋词

news/2024/11/25 9:30:53/

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>绝美宋词</title><link rel="stylesheet" href="css/style.css" /><script src="./js/vue.min.js"></script><script src="./js/axios.min.js"></script>
</head><body><div id="app"><h1 style="text-align: center">输入关键字，找一首词</h1><!-- TODO：待补充代码 --><div class="search-form"><input type="text" id="search" class="search" placeholder="词牌名 词句 词人" v-model="keyword" /><ul class="suggestions"><!-- 每一首完整词句用一个 li 包裹 --><li v-if="keyword.trim().length>0 && newList.length!==0" v-for="(item, index) in newList" :key="index"><span class="poet" v-html="highlight(item.poetry_content)">{{item.poetry_content}}</span><span class="title"><span v-html="highlight(item.title)"></span>-<span v-html="highlight(item.author)"></span></span></li></ul></div></div><script>let vm = new Vue({el: '#app',// TODO：待补充代码data() {return {keyword: '',list: [],newList: []}},async created() {const res = await axios.get('data.json')console.log(res);this.list = [...res.data]},watch: {keyword: function (val) {if (val.trim().length > 0) {console.log('keyword变化了');for (let i = 0; i < this.list.length; i++) {if (this.list[i].author.includes(val) || this.list[i].title.includes(val) || this.list[i].poetry_content.includes(val)) {// console.log(123);this.newList.push(this.list[i])}}} else {this.newList = []}}},methods: {highlight(content) {return content.replaceAll(this.keyword, `<span class="highlight">$&</span>`)}}})</script>
</body></html>

蓝桥杯-绝美宋词

相关文章

绝美中国建筑！为中国摄影师鼓掌！

你与绝美文章只差一个Typora（Mac版）

java我的世界光影_我的世界绝美光影1.7.10下载_我的世界绝美光影整合包下载-安卓下载...

用Flutter + Dart快速构建一款绝美移动App

30张世间绝美照片，百年难遇！

255套绝美ppt模板！适用于总结汇报、形象宣传、授课培训、项目介绍、毕业答辩等...

从想法到实干，2018年13项NLP绝美新研究

如何用python一键保存绝美***壁纸？