vue请求完后端拿到值怎么给到页面更新属性

在 Vue 中，我们可以使用数据绑定来更新页面属性。当后端返回值后，我们可以将其保存在 Vue 实例的一个属性中，然后在模板中使用这个属性进行数据绑定。

具体步骤如下：

1. 在 Vue 实例中定义一个属性，用于保存后端返回的值。

data() {
  return {
    backendData: null
  }
}

2. 在发送请求的方法中，将后端返回的值赋值给 `backendData`。

fetchData() {
  axios.get('/api/data')
    .then(response => {
      this.backendData = response.data
    })
    .catch(error => {
      console.log(error)
    })
}

3. 在模板中使用数据绑定，将 `backendData` 的值显示在页面上。

<div>{{ backendData }}</div>

当后端返回值后，页面上的 `backendData` 属性会自动更新为新的值，从而更新页面上的内容。如果需要对返回的值进行处理，可以使用计算属性或者 watch 来实现。

相关问题

vue 拿到后端的图片数据并显示

要拿到后端的图片数据并显示，可以使用 Vue.js 搭配 Axios 和 Blob 对象进行实现。具体步骤如下：

1. 在 Vue.js 的组件中，使用 Axios 发送请求，获取后端的图片数据。

axios.get('/api/image', { responseType: 'blob' })
  .then(response => {
    // 将响应数据转换为 Blob 对象
    const blob = new Blob([response.data], { type: 'image/jpeg' });
    // 调用 URL.createObjectURL() 方法创建图片 URL
    const imageUrl = URL.createObjectURL(blob);
    // 将图片 URL 存储到 Vue.js 的 data 中
    this.imageUrl = imageUrl;
  })
  .catch(error => {
    console.log(error);
  });

2. 在 Vue.js 的模板中，使用 img 标签显示图片。

<template>
  <div>
    <img :src="imageUrl" alt="图片">
  </div>
</template>

通过以上步骤，就可以在 Vue.js 中拿到后端的图片数据并显示。需要注意的是，由于图片数据是以 Blob 对象的形式返回的，所以需要使用 URL.createObjectURL() 方法创建图片 URL，而不是直接将响应数据赋值给 img 标签的 src 属性。同时，也需要在 Axios 的请求配置中设置 responseType 为 'blob'，以确保响应数据以 Blob 对象的形式返回。

vue拿到后端返回的list,渲染出element-tree树结构

首先需要从后端获取到list数据，可以使用Vue提供的Ajax技术，通过axios库或者其他框架发送GET请求，获取到数据后将其存储在data中。

然后，需要在Vue组件中使用element-tree组件来展示树形结构。可以在template中定义一个el-tree标签，并通过v-for指令遍历数据，将数据显示在树中。可以参考element-tree官方文档给出的示例，进行适当的修改。

在处理数据时，需要将后端返回的list进行转换，转换成element-tree所需要的格式。element-tree要求数据以{label, children}的形式组织，其中label表示节点的名称，children表示节点的子节点。

在Vue的methods中定义一个函数，将后端返回的list转换成element-tree需要的格式，使用递归的方式遍历数据，将数据转换成树形结构，最终返回一个符合要求的数据对象。

最后，在Vue的mounted生命周期中，调用后端API获取数据，并调用转换函数将数据格式化为element-tree可用的格式。然后将数据传入el-tree组件中，即可渲染出树形结构。