【Vue】实现搜索内容变红·教程
文章目录效果图源代码效果图未搜索前搜索内容后源代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content=
·
效果图
- 未搜索前
- 搜索内容后
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.txt {
border: 2px dotted lightblue;
width: 600px;
}
</style>
<body>
<div id="app">
<input type="text" v-model="sword" >
<div class="txt" v-search="{searchValue:sword,message:msg}">{{msg}}</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
// 定义全局的自定义指令，搜索的内容变红
Vue.directive('search', {
// 只要更新就会触发钩子函数
update(el,binding){
var {searchValue,message}=binding.value;
// 将字符串转数组
var arr = message.split(searchValue)
// 将searchValue标红
var sp = `<span style="color:red;">${searchValue}</span>`;
//使用红色的字对数组进行连接，连接后放回到 el中
el.innerHTML = arr.join(sp);
}
})
var app = new Vue({
el:"#app",
data:{
sword:"",
msg:"北京市人民政府新闻办公室今日（3月2日）召开第三十八场疫情防控新闻发布会。摄 新京报记者 李凯祥 肖飒表示北京市纪委监委已于2月26日成立调查组，工作重点围绕黄某某如何进京、如何进社区开展调查，核查疫情防控工作全过程是否存在漏洞。 针对黄某某如何进京，肖飒表示，大广高速求贤检查站辅警在黄某某一行人进京时，对其进行测温检查，测温显示正常，工作人员并未按要求对进京人员进行再次身份审核。 针对黄某某如何进入社区，肖飒表示，新怡家园小区地下车库入口为自动抬杆，只要录入系统的车辆，无需人员测温，车辆即可进入。就此，小区地下车库的不规范测温行为，导致黄某某一行人开车进入车库。"
}
})
</script>
</html>
技术共进，成长同行——讯飞AI开发者社区
更多推荐
1
0- 0
已为社区贡献7条内容
所有评论(0)