用vue写了个瀑布流布局,看着还可以

源博文发布于2018-10-11 (由于收到建议,在vue中v-for的优先级高于v-if的优先级,这意味着v-if 将分别重复运行于每个 v-for 循环中所以,不推荐v-if和v-for同时使用)

2019-6-1【最新更改的代码】,并未通过v-if来判断拆分左右两部分布局,而是通过css来达到瀑布流效果,下面为最新代码,可以直接复制使用。



	
		
		
		vue瀑布流布局
		
		
	
	
		
  • {{item.u_name}}

    {{item.e_intro}}

 

【原旧的代码】,是通过v-if = index% == 0  和 v-if = index% == 1 将布局拆分左右两个部分再做浮动(不建议使用)

在学vue的路上,学了些基础,验收一下学习爱的成果。写了个简单的瀑布流布局,当作记录一下学习过程。适合新手们,比较简单易上手,不废话了,上代码。




	
	
	vue瀑布流布局
	
	


	
  • {{item.u_name}}

    {{item.e_intro}}

  • {{item.u_name}}

    {{item.e_intro}}

代码还是一样可以直接复制用,效果图(手机扫码 - 旧的)
用vue写了个瀑布流布局,看着还可以_第1张图片

你可能感兴趣的:(web前端,vue)