这个方法是Vue3，那我需要如何使用in中的this对象呢

在Vue 3中，你可以使用箭头函数或使用bind方法来确保在回调函数中正确绑定this对象。

使用箭头函数的方式如下：

uni.createSelectorQuery().in(this).select('.active-size-tab').boundingClientRect((elActive) => {
  // 在这里可以使用this来引用Vue组件实例中的属性和方法
});

通过箭头函数，它会自动绑定外层作用域的this对象，因此你可以在回调函数中直接使用this来引用Vue组件实例中的属性和方法。

如果你不想使用箭头函数，你可以使用bind方法来手动绑定this对象：

uni.createSelectorQuery().in(this).select('.active-size-tab').boundingClientRect(function(elActive) {
  // 在这里可以使用this来引用Vue组件实例中的属性和方法
}.bind(this));

通过使用bind方法，你可以将回调函数中的this对象绑定为当前Vue组件实例。

无论你选择使用箭头函数还是bind方法，都可以确保在回调函数中正确引用Vue组件实例中的属性和方法。

相关问题

前端设计多个条件检索时，Vue3中如何设计相应的方法

在Vue3中，我们可以使用computed属性来实现条件检索的方法。具体来说，我们可以定义一个computed属性，根据多个条件进行筛选，并返回筛选后的结果。

比如，假设我们有一个数组data，包含多个对象，每个对象都有两个属性name和age。我们需要根据用户输入的条件进行筛选，可以定义一个computed属性，如下所示：

computed: {
  filteredData() {
    return this.data.filter(item => {
      // 判断是否满足所有条件
      return item.name.includes(this.keyword) && item.age >= this.minAge && item.age <= this.maxAge
    })
  }
}

在上面的代码中，我们定义了一个computed属性filteredData，它返回筛选后的结果。具体来说，我们使用数组的filter方法对原始数据进行筛选，对于每个对象，只有同时满足所有条件才会被保留。

其中，this.keyword、this.minAge和this.maxAge分别是用户输入的关键字、最小年龄和最大年龄。我们可以在模板中使用filteredData来展示筛选后的结果：

<ul>
  <li v-for="item in filteredData" :key="item.id">{{ item.name }} - {{ item.age }}</li>
</ul>

以上就是在Vue3中设计多个条件检索的方法的基本思路。

vue3中如何将对象转换为数组

在 Vue 3 中，可以使用 ES6 的 Object.entries() 方法将对象转换为数组。该方法返回一个由对象的键值对组成的数组。

以下是一个使用 Object.entries() 方法将对象转换为数组的示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemsArray" :key="index">{{ item[0] }}: {{ item[1] }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: {
        a: 1,
        b: 2,
        c: 3
      }
    }
  },
  computed: {
    itemsArray() {
      return Object.entries(this.items);
    }
  }
}
</script>

在上面的示例中，computed 计算属性 itemsArray 返回 this.items 对象的键值对数组。在模板中，使用 v-for 指令遍历该数组，并将每个数组项的第一项作为键，第二项作为值展示在页面上。

需要注意的是，在使用 Object.entries() 方法时，数组项的顺序与对象属性的定义顺序有关。如果需要按照特定的顺序展示数组项，可以在对象中使用数字作为键，或在转换为数组后使用 Array.sort() 方法进行排序。