vue全文搜索高亮显示

方法一：

<html>
<head>
  <title>无标题页</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">
<script src="js/vue.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
   <div class="box">
    <div class="left">
     <input type="text" placeholder="搜索数据" v-model="keywords" />
    </div>
    <div class="content">
         <span v-html="highLight(al.ajmc,keywords)">        
         </span>
    </div>
   </div>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     keywords: '',
     al:{"ajmc":"抱一抱就当作从没有在一起抱一抱就当作从没有在抱就当作从没有在一起抱一抱就当作从没有在一起"
    }},
    methods:{
         highLight:function(item, highLight){
           return this.highLightTableMsg(item, highLight)
        },
        highLightTableMsg:function(msg, highLightStr){
            if (msg == null) {
                msg = ''
            }
            if (highLightStr == null) {
                highLightStr = ''
            }
            if (msg instanceof Object) {
                msg = JSON.stringify(msg)
            }
            if (highLightStr instanceof Object) {
                highLightStr = JSON.stringify(highLightStr)
            }
            if (!(msg instanceof String)) {
                msg = msg.toString()
            }
            if (!(highLightStr instanceof String)) {
                highLightStr = highLightStr.toString()
            }
            var htmlStr = ''
            if (highLightStr.length > 0) {
                if (msg.indexOf(highLightStr) !== -1) {
                    assemblyStr(msg, highLightStr)
        
                } else {
                    htmlStr = '<span>' + msg + '</span>'
                }
            } else {
                htmlStr = '<span>' + msg + '</span>'
            }
            function assemblyStr(msgAssembly, highLightAssembly) {
                if (msgAssembly.indexOf(highLightAssembly) !== -1) {
                    var length = highLightAssembly.length
                    // alert(length)
                    var start = msgAssembly.indexOf(highLightAssembly)
                    htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="background-color:#ffe72d;">' + highLightAssembly + '</span>'
                    msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
                    assemblyStr(msgAssembly, highLightAssembly)
                } else {
                    htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
                }
            }
            return htmlStr;
        }
    }
   })
  </script>
</body>
</html>

原博客地址：https://blog.csdn.net/jingyoushui/article/details/102566534

相关阅读:
PV、UV、GMV
保存Hive查询结果的方法 insert overwrite 用法
 Hive substr 函数截取字符串
 HIVE中join、semi join、outer join
Hive 差集运算
 gitlab和github区别
 前端工程化 ESlint 配置
 ES6 WeakMap Map 区别
 js 创建数组方法以及区别
 eslint for...in 报错处理
原文地址：https://www.cnblogs.com/xiaobaibubai/p/14148182.html