【Vue】实现搜索内容变红·教程

一颗不甘坠落的流星

已于 2024-02-19 15:26:56 修改

阅读量904

点赞数 1

分类专栏：工作随记文章标签： vue 搜索内容变红

于 2021-03-26 19:07:52 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/115253061

版权

工作随记专栏收录该内容

69 篇文章 3 订阅

订阅专栏

文章目录

- 效果图
- 源代码

效果图

未搜索前
搜索内容后

源代码

<!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>

一颗不甘坠落的流星

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】实现搜索内容变红·教程

文章目录效果图源代码效果图未搜索前搜索内容后源代码<!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-s
复制链接

扫一扫