vue精准查询，模糊查询，输入西天，可以查询到西安的天气很好这句话，输入西，也可以查询到，关键字高亮，完整举例

好的，下面是一个完整的示例：

<template>
  <div>
    <input v-model.trim="keyword" placeholder="请输入关键字">
    <div v-for="item in filteredList" :key="item.city">
      <p v-html="highlight(item.city)"></p>
      <p v-html="highlight(item.weather)"></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      weatherList: [
        { city: '北京', weather: '晴转多云' },
        { city: '上海', weather: '小雨转阴' },
        { city: '广州', weather: '多云转晴' },
        { city: '西安', weather: '晴' },
        { city: '深圳', weather: '阴' },
        { city: '成都', weather: '晴转阴' },
        { city: '重庆', weather: '小雨' },
        { city: '武汉', weather: '多云' },
        { city: '天津', weather: '晴' },
        { city: '沈阳', weather: '小雨' },
        { city: '南京', weather: '晴' },
        { city: '杭州', weather: '多云转小雨' },
        { city: '我的', weather: '我是你的宝' }
      ]
    }
  },
  computed: {
    filteredList() {
      if (this.keyword) {
        // 精准查询
        return this.weatherList.filter(item => item.city === this.keyword)
      } else {
        // 模糊查询
        return this.weatherList.filter(item => item.city.includes(this.keyword))
      }
    }
  },
  methods: {
    highlight(text) {
      let reg = new RegExp(this.keyword, 'gi')
      return text.replace(reg, '<span class="highlight">' + this.keyword + '</span>')
    }
  }
}
</script>

<style>
.highlight {
  color: red;
  font-weight: bold;
}
</style>

在上面的示例中，我们使用了一个highlight方法来实现关键字高亮显示，该方法接受一个字符串作为参数，返回一个带有高亮效果的字符串。在highlight方法中，我们使用了RegExp对象来创建一个正则表达式，使用replace方法来替换匹配到的关键字。同时，我们在模板中使用了v-html指令来渲染含有HTML标签的文本，并使用highlight方法来实现关键字高亮显示。您可以将上面的示例复制到一个.vue文件中进行测试。