这篇文章讲述了在前端开发中，如何在输入变化时利用`inputChange`函数动态查询商品数据。通过`httpApi.goodsApi.queryLike`接口获取数据后，对商品描述进行处理，用红色高亮显示匹配的关键词，并构建新的商品对象数组，包含`cat_id`,`cover`,`description`,`g_id`,`price`等属性。
<p v-html="desc"></p> 渲染层
逻辑层
inputChange(key) {
let params = { kwd: key }
httpApi.goodsApi.queryLike(params).then(res => {
this.products = res.data.data.map(item => {
item.description = item.description.replaceAll(key,`<span style="color:red;">${key}</span>`)
return {
cat_id: item.cat_id,
cover: item.cover,
description: item.description,
g_id: item.g_id,
price: item.price
}
})
})
}
},
扫一扫
6508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
