双大括号中数据简短书写

写的这么长，只是为了方便解释和阅读。实际上，在Vue模板中访问对象的属性是通过双大括号和对象属性名称的组合来实现的。如果您想访问对象datum.process_params.compressed.text.text中的文本属性，您可以在模板中这样写：

{{ datum.process_params.compressed.text.text }}

其中，datum是你在模板中定义的变量名，代表接口返回的数据对象。process_params是datum对象中的一个属性，compressed是process_params属性中的一个对象，text是compressed对象中的一个属性，而text属性又是一个包含文本的对象。通过这样的方式，你可以访问对象中的任意深度的属性。

计算属性

可以使用Vue模板语法中的computed属性，来处理数据并将其显示在模板中，从而避免在模板中写过长的表达式。computed属性可以根据data中的数据进行计算并返回新的值，然后在模板中使用这些值。

例如，如果要在模板中显示process_params中的"status"文本，可以在Vue组件中添加一个computed属性，如下所示：

<template>
  <div>{{ statusText }}</div>
</template>

<script>
export default {
  data() {
    return {
      datum: { process_params: {...} }
    };
  },
  computed: {
    statusText() {
      return this.datum.process_params.compressed.status.text;
    }
  }
};
</script>

在上面的代码中，我们创建了一个computed属性statusText，它会从datum.process_params中获取最里层的"status"文本数据。在模板中，我们可以使用双大括号语法{{ statusText }}来显示这个值。

封装成函数

如果要展示多个数据，将所有的数据都写在computed属性中确实比较麻烦且冗长。在这种情况下，你可以考虑将数据处理的过程封装成一个函数，然后在computed属性中调用这个函数来获取想要的数据。

比如你可以这样编写函数

methods: {
  getCompressedText: function(processParams) {
    return processParams.compressed.text.text;
  },
  getCompressedStatus: function(processParams) {
    return processParams.compressed.status.text;
  },
  getCompressedSwitch: function(processParams) {
    return processParams.compressed.is.switch;
  }
  //添加其他需要展示的数据的处理函数
}

然后在模板中使用这些函数来获取数据：

<template>
  <div>
    <p>压缩结果状态：{{ getCompressedStatus(datum.process_params) }}</p>
    <p>压缩结果开关：{{ getCompressedSwitch(datum.process_params) }}</p>
    <p>压缩结果文本：{{ getCompressedText(datum.process_params) }}</p>
    <!-- 使用其他处理函数获取其他需要展示的数据 -->
  </div>
</template>

这样可以将数据处理逻辑和模板代码分开，使得代码更加清晰易懂，也方便维护和修改。

其他方式

可以考虑在组件的 created() 或者 mounted() 钩子函数中对 datum.process_params 进行处理，将需要的数据保存在组件的 data 中，然后在模板中直接引用 data 中的数据即可。

举个例子，假设你想要展示 compressed 中的 text 字段和 query 中的 query 字段，你可以这样处理：

<template>
  <div>
    <p>compressed.text: {{ compressedText }}</p>
    <p>query.query: {{ queryText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      compressedText: '',
      queryText: ''
    }
  },
  created() {
    // 处理 compressed 中的 text 字段
    this.compressedText = this.datum.process_params.compressed.text.text

    // 处理 query 中的 query 字段
    this.queryText = this.datum.process_params.query.query.text
  }
}
</script>

这样在模板中就可以直接使用 compressedText 和 queryText 了，而不需要在模板中写很长的表达式。当然，如果需要展示的字段较多，仍然可以考虑使用计算属性来处理。