关于vue.js:vue使用vhtml实现一段字符串中关键字词高亮效果

问题形容

需要：咱们搜寻某个关键字，后端返回给咱们一个字符串，这个字符串中蕴含咱们搜寻的关键字，咱们须要把这个字符串中的关键字局部加上高亮成果（相似于百度搜寻关键字高亮的成果）。咱们先看一下，大抵相似的效果图：

如上图所示，需要很简略，就是关键字高亮。

思路剖析

解决形式有两种，第一种就是进行字符串的切割，把关键字切出来，加上一个色彩。这种形式上一篇文章对于字符串的办法整顿的文章曾经说过了，不赘述，详情可点击链接跳转瞅瞅。

附上地址：https://segmentfault.com/a/11...

接下来咱们说第二种形式，应用v-html指令加上字符串的替换办法，话不多说，上代码。

<template>  <div id="app">    <div>      <span v-html="highLight(title)">{{title}}</span>    </div>  </div></template><script>export default {  data() {    return {      title:"五百年前孙悟空大闹天宫",      searchWord:"孙悟空"    };  },  methods: {    highLight(title){      // 如果题目中蕴含，关键字就替换一下      if(title.includes(this.searchWord)){        title = title.replace(            this.searchWord,             // 这里是替换成html格局的数据，最好再加一个款式权重，保险一点            '<font style="color:red!important;">'+ this.searchWord +'</font>'        )        return title      }      // 不蕴含的话还用这个      else{        return title      }    }  },};</script>

代码效果图：

DOM元素审查

总结

v-html如同平时不怎么用到这个vue的指令，不过实际上在某些场景下，应用v-html可能很好的解决问题