uniapp #题高亮
时间: 2025-06-22 14:40:02 浏览: 10
### UniApp 实现标题高亮方法
在 UniApp 开发过程中,实现标题高亮可以通过多种方式完成。对于特定场景下的文字高亮处理,可以采用正则表达式匹配并替换目标字符串的方式,在 HTML 中嵌入带有样式的标签来达到视觉上的突出显示。
#### 使用正则表达式与 `v-html` 绑定属性实现实时高亮
当需要动态更新页面上某些部分的内容并且希望这些新加入的文字能够被特殊标记出来的时候,下面这段代码提供了一个可行方案:
```html
<template>
<view class="content">
<!-- v-html用于解析渲染HTML片段 -->
<text>{{ highlightedText }}</text>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const searchText = ref('关键字'); // 用户输入的查询词
const originalTitle = "这是一个包含'关键字'在内的很长一段描述性的文本";
// 计算属性:根据searchText实时计算出带颜色标注的新字符串
const highlightedText = computed(() => {
const regExp = new RegExp(`(${searchText.value})`, 'gi');
return originalTitle.replace(regExp, '<span style="color:red">$1</span>');
});
</script>
<style scoped>
/* 可在此处进一步定制样式 */
.content span {
font-weight: bold;
}
</style>
```
此段代码展示了如何利用 JavaScript 的正则表达式对象配合 Vue.js 提供的数据绑定机制以及模板编译特性轻松达成所愿。每当用户改变搜索框内的值时,都会触发重新计算逻辑从而即时反映出最新的变化情况[^2]。
另外一种更为灵活的做法是在组件内部封装好相应的业务逻辑之后通过 props 向外部暴露接口参数以便于调用方传递所需配置项;同时允许使用者借助 slot 插槽机制来自由调整最终呈现形式而不必受限于框架本身预设好的选项集合内[^3]。
阅读全文
相关推荐


















