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

最新推荐文章于 2021-08-18 15:20:35 发布
最新推荐文章于 2021-08-18 15:20:35 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端 文章标签： 一个div中许多列表 使用全局 将数据显示到页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33212500/article/details/51735004
版权 
 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>


 


 
 


 
 


                

        

        

    

  


    

      

        

            

              
                
                  指尖飘落的程序
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue 悬停显示另一个div_在vue中写一个跟着鼠标跑的div，div里面动态显示数据

				
			

			

				

					weixin_39928003的博客
				

				

					12-18
					
					864
					
				

			

		

		

			
				
1.div应该放在body里面，这是我放在body中的一个div里面的div{{floatData.name}}{{level(floatData.level)}}{{floatData.intersectionStartRing}}环~{{floatData.intersectionEndRing}}环{{floatData.estimatedViewStartTime}}-{{floatDat...

			
		

	



                

              
                



	

		

			

				
					
DIV+CSS网页标准实现表格形式的数据排列

				
			

			

				

					03-17
				

			

		

		

			
				
NULL
博文链接：https://sunnymoon.iteye.com/blog/571473

			
		

	



                


  
              

                


	

		

			

				
					
div标签与列表

				
			

			

				

					z2414901424的博客
				

				

					06-25
					
					801
					
				

			

		

		

			
				
div标签
div是英语division：分割的缩写，顾名思义。
div标签对用来将相关的内容组合到一起，和其他内容分割，使文档结构更清晰
转义字符


常见转义字符（字符实体）：




转义字符
意义




&lt ;
小于号


&gt ;
大于号


&nbsp ;
空格（不会被折叠）


&copy ;
版权符号©




有序列表ol


有序列表使用ol标签，每个列表项都是li标签


li标签不能散着放，它必须是ol标签或者ul标签的子标签


li标签中可

			
		

	





	

		

			

				
					
DIV+CSS+列表的使用

				
			

			

				

					xxz2645746142的博客
				

				

					10-08
					
					2204
					
				

			

		

		

			
				
DIV+CSS+列表的使用
HTML4到HTML5的区别：
1.新标签
2.&lt;！DOCTPE html&gt;
节点标签
head：头元素
meta：编码方式
title：标题标签
css：
外部样式表 link rel引入
内嵌样式表
em:响应式设计，手机上的标准字体   px
注释：CTRL+/

加id class 给相同标签的区分
类选择器
.p
元素选择器：
p
行内元素：


...

			
		

	



		

			
		



	

		

			

				
					
列表显示的切换功能（div）

				
			

			

				

					世范水晶
				

				

					04-20
					
					181
					
				

			

		

		

			
				
&lt;%@ page language="java" contentType="text/html"    pageEncoding="utf-8"%&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Insert title here&lt;/title&gt;&lt;/head&gt;&lt;body&

			
		

	





	

		

			

				
					
循环div加后台获取的list集合数据整合

				
			

			

				

					weixin_42707543的博客
				

				

					04-03
					
					1346
					
				

			

		

		

			
				
var baseRequestUrl = 'http://localhost:8888';
		  $(function () {
            $.ajax({
                type: "post",
                url: baseRequestUrl + "/admin/receptionInfo/websitePositionList",
 ...

			
		

	





	

		

			

				
					
在vue里面设置全局变量或数据的方法

				
			

			

				

					11-28
				

			

		

		

			
				
本文将详细讲解如何在Vue中实现全局变量的设置，并提供一个实际示例。  首先，我们需要理解Vue中的插件系统。Vue插件是一种扩展Vue功能的方式，它可以通过`Vue.use()`方法安装。我们可以创建一个自定义的插件，用来...

			
		

	





	

		

			

				
					
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

				
			

			

				

					10-15
				

			

		

		

			
				
`scrollTo`接受一个对象作为参数，其中`top`属性表示滚动到的垂直位置，而`behavior`属性设置为`smooth`，意味着页面将以平滑动画的方式滚动。注意，这里使用的是全局的`window`对象，这意味着整个窗口会进行滚动。...

			
		

	





	

		

			

				
					
【JavaScript源代码】vue列表数据删除后主动刷新页面及刷新方法详解.docx

				
			

			

				

					12-29
				

			

		

		

			
				
总的来说，通过`provide / inject`组合，我们可以创建一个全局的刷新方法，有效地在Vue应用中处理数据更新后的页面刷新问题，确保用户界面始终与后端数据保持同步。这种方法不仅避免了不必要的浏览器刷新，也保持了...

			
		

	





	

		

			

				
					
jQuery 局部div刷新和全局刷新方法总结

				
			

			

				

					10-21
				

			

		

		

			
				
jQuery提供了一个.load()方法，该方法可以将指定的远程HTML内容加载到当前的jQuery对象中。例如，如果你想更新id为“dl”的div元素的内容，可以使用以下代码：  ```javascript $(".dl").load(location.href + ".dl")...

			
		

	





	

		

			

				
					
后端list集合如何简单展示到html页面

				
			

			

				

					qq_41837182的博客
				

				

					10-08
					
					2877
					
				

			

		

		

			
				
***controller***

```java
@RestController
public class ProController {
    @Autowired
    private ProductService productService;

    @RequestMapping(value="getProAll")
    public List<Product> ...

			
		

	





	

		

			

				
					
html-day02笔记-表格、列表和表单

				
			

			

				

					weixin_37128962的博客
				

				

					04-02
					
					791
					
				

			

		

		

			
				
typora-copy-images-to: media

第01阶段.web基础：html-day02笔记-表格、列表和表单

HTML 第二天目标
能够利用表格、列表和表单完成注册页面的综合案例

能出说表格用来做什么的
能说出列表用来做什么的
能说出表单用来做什么的

为了让我们页面显示的更加整齐，我们需要学习三个表（表格、表单、列表）

一、表格 table(会使用)
学习目标

理解：...

			
		

	





	

		

			

				
					
【汇智学堂】-div+css布局十二(商品列表图文展示）

				
			

			

				

					weixin_39593940的博客
				

				

					07-02
					
					899
					
				

			

		

		

			
				
效果图：

html文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图文显示商品</title>
	</head>
	<body>
		
		<div style="padding-bottom: 10px;...

			
		

	





	

		

			

				
					
用户列表前端实现

				
			

			

				

					cx_129的博客
				

				

					08-18
					
					145
					
				

			

		

		

			
				
方式一：

.



方式二：










			
		

	





	

		

			

				
					
获取后台数据展示在下拉框列表

					
热门推荐

				
			

			

				

					sunshinegirl2018的博客
				

				

					03-23
					
					1万+
					
				

			

		

		

			
				
1首先 获取后台要展示的数据   定义获取的地址 请求方式  2 将该方法引入 需要展示的页面3 获取信息4 获取到到信息字段名5  将划线部分的字段名绑定在要展示的下拉框中6  初始话 ...

			
		

	





	

		

			

				
					
集合对象数据展示到前端页面

				
			

			

				

					qq_36005199的博客
				

				

					06-10
					
					4325
					
				

			

		

		

			
				
    首先集合对象数据展示到前端容易被遗忘，这个问题还是记录下比较好。集合对象数据就是对象的集合数据通过迭代的方式分布到前端；    @RequestMapping(value = "/item/itemlist.action")
	public String itemList(Model model) throws MessageException{
		//从Mysql中查询
		List&...

			
		

	





	

		

			

				
					
uniappt  vue3中，怎么获取用户列表并显示到页面，给个例子

					
最新发布

				
			

			

				

					05-31
				

			

		

		

			
				
在 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、付费专栏及课程。

              

            

          

      

      余额充值