关于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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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 随机生成10位字符代码
2009/03/26 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
详解Python中的静态方法与类成员方法
2017/02/28 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
java程序员面试交流
2012/11/29 面试题
给公司的建议书范文
2014/05/13 职场文书
企业文化演讲稿
2014/05/20 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书