搜索内容高亮-简易版

最新推荐文章于 2024-09-05 16:15:02 发布

超酷的我

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量95

点赞数

分类专栏： vue 文章标签： vue.js css3 javascript

本文链接：https://blog.csdn.net/qq_45384585/article/details/125089365

版权

Vue input 高亮搜索实时匹配前端开发

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<el-input class="input"  v-model="inputValue"></el-input>
<div class="text">
    <p class="p333" v-html="highLight('内容yayayyayay')"></p>
</div>

export default {
	data(){
		return {
			inputValue:'搜索内容'
		}
	},
	methods: {
		highLight(val) {
      		if (!val) return;
      		let VAL = val.toUpperCase();
      		let CON = this.inputValue.toUpperCase();
      		var index = VAL.indexOf(CON);
      		
      		if (index > -1) {
      			//main-color 高亮色
        		val = val.replace(
          		val.substring(index, index + CON.length), 
          		'<font class="main-color" style="font-weight: 500;">' +
           		 val.substring(index, index + CON.length) +
           		 "</font>"
       		 );
        		return val;
     		 } else {
        		return val;
      		}
   		 },
	}
	
}