uniapp vue3请求回来的数据包含特定字选择订单四个字， 四个字变颜色可点击

在Vue3的UniApp项目中，如果你想要返回的数据里包含了“选择订单”这四个字，并且希望它们在页面显示时支持高亮并且可点击，你可以这样做：

1. **HTML结构**：
创建一个包含文本的组件，比如`OrderSelector`：

   <template>
     <view v-bind:class="{ highlight: isHighlighting }">
       <text :textContent="dataToShow" @tap="handleTap"></text>
     </view>
   </template>

其中`isHighlighting`是一个用于控制颜色变化的状态变量。

2. **数据绑定**：
在你的组件内部，获取到包含“选择订单”的数据`dataToShow`：

   data() {
     return {
       dataToShow: '',
       isHighlighting: false,
     };
   },
   computed: {
     filteredData() { ... }, // 根据你的需求过滤出包含“选择订单”的部分
   },
   created() {
     this.dataToShow = this.filteredData;
   },

如果数据中存在“选择订单”，则设置`isHighlighting`为true。

3. **CSS样式**：
定义两个类，一个用于常规状态下，另一个用于高亮状态：

   .normal {
     color: black; /* 默认颜色 */
   }

   .highlight {
     color: blue; /* 高亮颜色 */
   }

并在模板上应用这两个类：

   ...
   <view :class="{ normal: !isHighlighting, highlight: isHighlighting }"></view>
   ...

4. **JavaScript事件处理**：

   methods: {
     handleTap(e) {
       if (e.target.textContent.includes('选择订单')) {
         this.isHighlighting = true;
       } else {
         this.isHighlighting = false;
       }
     },
   }

当文字被点击时，检查是否包含“选择订单”，然后切换`isHighlighting`状态。