关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)


Posted in Javascript onSeptember 04, 2018

下面一段代码给大家介绍vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),具体代码如下所示:

<div class="imglist-item" v-for="(items,key) in imgmaterialdialog.imglist" @click="selectimg(items,key)" :class="(key + 1) % 4==0?'imglist-noright':''">
 <img :src="items.tempMaterialUrl" alt="" />
<div class="layer" v-bind:class="{showorhide:key==currents}">
    <i class="el-icon-check"></i>
</div>
   <p class="img-name">{{items.filename}}</p>
</div>

每一个imglist-item都有margin-right:10px,用绑定class的方法来控制每一行的最后一个没有边距。

这里用到了v-bind:class。其中对于index值为3(第四项),7(第八项),11(第十二项)... (4的倍数项),需要显示hr,对于这些值,(index + 1) % 4为0,所以(index + 1) % 4==0为每一行的最后一个元素,显示hr。【这里index按顺序从0开始计数,所以index + 1为表示当前site在sites数组中是第几个,然后(index + 1) % 4,每满4,顺序数除以4余数都为0】

补充:下面看下vue规定v-for循环的次数

html:

<p v-for="(lab,index) in card.label" v-if='index<=1'></p>

控制for 循环的次数为两次

总结

以上所述是小编给大家介绍的关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
js随机生成一个验证码
Jun 01 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 #Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 #Javascript
mpvue写一个CPASS小程序的示例
Sep 04 #Javascript
Vue表单及表单绑定方法
Sep 04 #Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 #Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 #Javascript
You might like
php 中文和编码判断代码
2010/05/16 PHP
php调用c接口无错版介绍
2014/03/11 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
利用python开发app实战的方法
2019/07/09 Python
Python对象的属性访问过程详解
2020/03/05 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
医院护士的求职信范文
2013/12/26 职场文书
优秀公益广告词大全
2014/03/19 职场文书
娱乐节目策划方案
2014/06/10 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android