预实现效果，如图：

html（主要部分）：

<div v-html="setKeyWord(content)" class="content-box"></div>

js （主要部分）:

setKeyWord (str) {
      const reg = new RegExp(this.keyWord, 'g');
      return str.replace(reg, `<span style="color: red;">${this.keyWord}</span>`);
}

全部代码：

<template>
  <div class='box'>
    <p class='tip'>输入关键词查询</p>
    <input type="text" v-model="keyWord" placeholder="请输入关键字">
    <div v-html="setKeyWord(content)" class="content-box"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {
    return {
      keyWord: '',
      content: '先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。'
    };
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {
    setKeyWord (str) {
      const reg = new RegExp(this.keyWord, 'g');
      return str.replace(reg, `<span style="color: red;">${this.keyWord}</span>`);
    }
  },
}
</script>
<style lang='scss' scoped>
.box {
  padding: 40px;
  font-size: 16px;
}
input {
  height: 40px;
  width: 280px;
  padding: 0 8px;
  margin-bottom: 20px;
  font-size: 16px;
  border: 1px solid teal;
  border-radius: 6px;
  box-sizing: border-box;
}
.tip {
  font-size: 14px;
  color: #9d9d9d;
}
.content-box {
  width: 400px;
  margin: 0 auto;
  line-height: 2;
  text-align: left;
}
</style>