vue3如何在setup中帅选对象的时候匹配关键字使其改变颜色并且展示到模板上

在Vue3中，可以使用reactive函数创建一个响应式的对象，并在setup函数中使用computed函数筛选出符合条件的对象，并在模板中使用v-for指令循环展示。

具体实现步骤如下：

1. 在setup函数中使用reactive函数创建一个响应式的对象，并初始化数据。

import { reactive } from 'vue'

export default {
  setup() {
    const data = reactive({
      list: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 },
      ],
      keyword: '',
    })

    return {
      data,
    }
  },
}

2. 在模板中使用v-for指令循环展示数据，并使用v-bind:class指令根据条件动态绑定样式。

<template>
  <div>
    <input v-model="data.keyword" placeholder="请输入关键字" />
    <ul>
      <li v-for="item in filteredList" :key="item.name" :class="{ 'highlight': item.highlight }">
        {{ item.name }}，{{ item.age }}岁
      </li>
    </ul>
  </div>
</template>

3. 使用computed函数筛选出符合条件的对象，并动态绑定highlight属性。

import { computed } from 'vue'

export default {
  setup() {
    const data = reactive({
      list: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 },
      ],
      keyword: '',
    })

    const filteredList = computed(() => {
      return data.list.map(item => {
        if (item.name.includes(data.keyword)) {
          item.highlight = true
        } else {
          item.highlight = false
        }
        return item
      })
    })

    return {
      data,
      filteredList,
    }
  },
}

4. 在样式中定义highlight类，使匹配到的对象改变颜色。

.highlight {
  color: red;
}

运行后，在输入框中输入关键字，符合条件的对象会被标记为红色。