vue从后台拿到map怎么把里面的属性赋值

对于从后台获取到的 Map 类型的数据，我们可以将其转换为数组或对象类型，然后在 Vue 中使用 `v-for` 指令进行渲染。

具体的实现步骤如下：

1. 在 Vue 实例中定义一个 data 属性，用于存储后台返回的 Map 类型数据。

data() {
  return {
    mapData: new Map() // 存储后台返回的 Map 类型数据
  }
}

2. 在获取到后台返回的 Map 类型数据后，将其转换为数组或对象类型，方便在 Vue 中渲染。

例如，将 Map 转换为数组类型：

axios.get('/api/map').then(res => {
  this.mapData = Array.from(res.data) // 将后台返回的 Map 类型数据转换为数组类型，并赋值给 data 中的 mapData 属性
})

3. 在页面中通过 `v-for` 指令循环遍历数组或对象，并将数据渲染到页面上。

例如，将数组类型的 Map 数据转换为对象类型：

computed: {
  mapObject() {
    return Object.fromEntries(this.mapData) // 将数组类型的 Map 数据转换为对象类型
  }
}

<ul>
  <li v-for="(value, key) in mapObject" :key="key">{{ key }}: {{ value }}</li>
</ul>

在上述代码中，`v-for` 指令遍历 `mapObject` 对象中的每个属性，并将其渲染为一个列表项。

4. 在需要将 Map 中的属性赋值给 HTML 元素的属性时，使用 `v-bind` 指令或简写的冒号语法。

例如，将 Map 中的图片路径赋值给 `img` 标签的 `src` 属性：

<ul>
  <li v-for="(value, key) in mapObject" :key="key">
    <img :src="value.imgUrl" alt="">
    <span>{{ key }}: {{ value.name }}</span>
  </li>
</ul>

在上述代码中，`v-bind` 指令将 `value.imgUrl` 赋值给 `img` 标签的 `src` 属性。

以上就是在 Vue 中从后台拿到 Map 类型数据并将其转换为数组或对象类型，然后进行渲染的基本实现方法。