字符串某个文字高亮，且可以点击(v-html点击事件无效)

最新推荐文章于 2024-08-14 13:53:45 发布

qq_43765727

最新推荐文章于 2024-08-14 13:53:45 发布

阅读量288

点赞数

分类专栏： vue 文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43765727/article/details/128302561

版权

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用 Vue.js 实现文本高亮的方法，当文本中包含特定关键字时，该关键字将以特殊样式（如红色）进行突出显示，并且在用户点击高亮关键字时可以触发特定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div v-html="highLight(text)" @click="handleClick">{{text}}</div>
</<template>>
<script>
	data() {
		return {
			text: '123456'
		}
	},
	methods: {
		highLight(title){
	      // 如果标题中包含，关键字就替换一下
	      const searchWord = 1
	      if(title.includes(searchWord)){
	        title = title.replace(
	            searchWord, 
	            // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
	            '<span style="color:red!important;"">'+ searchWord +'</span>'
	        )
	        return title
	      }
	      // 不包含的话还用这个
	      else{
	        return title
	      }
	    },
	     handleClick(e) {
	      if (e.target.localName.toLowerCase() === 'span') {
	        console.log('点击了高亮文字');
	      }
	    },
	}
</script