一个div中许多列表,使用全局,将数据显示到页面

 var pricelist;

 // 加载资源售价
        function price(){
        	informationDataController.getPriceList(function(data){
        		if(data.resultObject != null){
        			pricelist = data.resultObject;
        		}
        	},false);
        };

<pre name="code" class="html"><li class="list clearfix">
                            <label class="required">售价:</label>
                            <div class="change-public-doc">
								<select name="soldPrice" style="height: 30px;width: 120px;">
									{{each(i,pri) pricelist}}
										<option value="{{= pri.price}}">{{= pri.name}}</option>
									{{/each}}
                				</select>
                            </div>
                            <div class="selling-price">
                                <a href="/views/help/helpCenter2.html" target="_blank">什么是知筑币?</a>
                            </div>
                        </li>

<div class="change-public-doc">
								<select name="soldPrice" style="height: 30px;width: 120px;">
									{{each(i,pri) pricelist}}
										<option value="{{= pri.price}}">{{= pri.name}}</option>
									{{/each}}
                				</select>
                            </div>


 




在 uni-app 使用 Vue3 获取用户列表显示页面,可以通过以下步骤实现。 1. 定义用户列表组件 首先,你需要定义一个用户列表组件,用来显示用户列表。假设你已经定义了一个 `UserList` 组件,你可以按照以下方式进行编写: ```vue <template> <div> <div v-for="user in userList" :key="user.id"> {{ user.name }} </div> </div> </template> <script> import { reactive, onMounted } from 'vue' import { getUserList } from '@/api/user' export default { setup() { const state = reactive({ userList: [] }) onMounted(() => { getUserList().then(res => { state.userList = res.data }) }) return { userList: state.userList } } } </script> ``` 在这里,我们使用了 Vue3 的 `setup` 函数,然后在函数内部使用 `reactive` 函数定义了一个响应式的状态对象 `state`,其包含了用户列表 `userList`。然后,我们使用 `onMounted` 函数在组件挂载后发送网络请求,获取用户列表数据,并将数据保存到 `userList` 。最后,我们将 `userList` 对象暴露给模板,以便在页面进行渲染。 2. 编写获取用户列表数据的 API 在上面的代码,我们调用了一个名为 `getUserList` 的函数来获取用户列表数据。这个函数应该是一个网络请求函数,你需要根据你的实际需求进行编写。 例如,你可以按照以下方式定义一个获取用户列表数据的 API: ```javascript import request from '@/utils/request' export function getUserList() { return request({ url: '/user/list', method: 'get' }) } ``` 在这里,我们使用一个名为 `request` 的网络请求函数来发送网络请求。你需要根据你的实际需求来定义这个函数。 3. 在页面使用用户列表组件 最后,你可以在页面使用刚才定义的用户列表组件。例如,你可以按照以下方式进行编写: ```vue <template> <div> <user-list /> </div> </template> <script> import UserList from '@/components/UserList.vue' export default { components: { UserList } } </script> ``` 在这里,我们将 `UserList` 组件注册为全局组件,并在页面使用。当页面被渲染时,`UserList` 组件会自动发送网络请求,获取用户列表数据,并将数据渲染到页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值