zoukankan html css js c++ java

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

查看全文

相关阅读:
【中位数均分纸牌】糖果传递
 【模板】均分纸牌
 【离散化】电影
 【离散化】区间和
 【最大子矩阵】城市游戏
 vue中如何引入Element-ui
详细教你:如何搭建vue环境和创建一个新的vue项目
 vue中如何引入bootstrap
十天冲刺（4）
十天冲刺（3）

原文地址：https://www.cnblogs.com/xiaobaibubai/p/14148182.html