uniapp模态框的content的内容是接口返回的怎么拼接
时间: 2023-11-27 22:50:35 浏览: 77
uniapp中点击按钮,请求接口时连续点击出现重复请求接口现象
如果您使用的是uniapp的内置组件uni-modal,您可以通过绑定模态框的内容为一个变量,然后在接口返回数据后,将数据拼接到该变量上,最后通过双向绑定的方式更新模态框的内容。例如:
``` html
<template>
<view>
<uni-button @click="openModal">打开模态框</uni-button>
<uni-modal :show="showModal" @click="closeModal">
<view>{{ modalContent }}</view>
</uni-modal>
</view>
</template>
<script>
export default {
data() {
return {
showModal: false,
modalContent: '' // 模态框的内容
}
},
methods: {
openModal() {
this.showModal = true
// 发送接口请求
// 假设接口返回的数据为 { name: '张三', age: 18 }
uni.request({
url: 'api/getData',
success: (res) => {
// 将接口返回的数据拼接到模态框的内容上
this.modalContent = '姓名:' + res.data.name + ',年龄:' + res.data.age
}
})
},
closeModal() {
this.showModal = false
}
}
}
</script>
```
需要注意的是,如果接口返回的数据较多或者需要特殊的展示方式,您可能需要对数据进行格式化和样式的处理。另外,如果您使用的是第三方ui库中的模态框组件,拼接内容的方式可能会略有不同,请参考相关组件的官方文档。
阅读全文