vue中给v-for加条件判定（vue中v-for循环列表根据条件判断两边对齐效果（常用））

最新推荐文章于 2024-04-18 15:01:57 发布
最新推荐文章于 2024-04-18 15:01:57 发布
阅读量2.7w 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nz618/article/details/90209621
版权


首先上图解释： 
黑框元素宽width：22%； 
循环给每个黑框添加class（也就是添加margin-left:4%；margin-top:20px）； 
因为最左边一竖排我们不需要添加class，则我们需要条件判断是否需要添加class

html代码：
...
//绑定class根据判断条件添加class，
//imgListItem_mg(index)传入下标号参数，返回true or false
<div class="imgList_item "  v-for="(o, index) in 7" :class="{margin: imgListItem_mg(index)}" :key="o">

最低0.47元/天 解锁文章
nz618
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
混合App的使用
qq_45955475的博客
12-08 364
写在前面： 由于业务需要，接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发，有一些经验和总结，欢迎各位一起交流学习~ 1、混合开发概述 Hybrid App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。 目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、微信等知名移动应用，都是采用
vue中使用v-for实现两次嵌套循环，判断某子元素是否显示，进行复杂表单校验
铁锤妹妹的博客
07-12 5641
有以下一个使用场景，名称111、名称222、名称333，是放在一个大数组里的，然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组，子数组再通过第二次for循环展示出来。当我们选择发放方式的时候，符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。
带条件使用v-for
nkymxx123456的博客
11-09 1380
带条件使用v-for 使用场景：循环一个数组中某几项符合的内容
vue动态class/style
最新发布
u010609022的专栏
04-18 2840
通过v-bind:style指令，可以实现根据数据的变化动态改变元素的样式，包括颜色、大小、位置等。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过v-bind:style数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。可以是变量、对象属性或直接的类名字符串。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
v-for循环 根据条件控制显示或隐藏
m0_63701303的博客
03-15 1340
v-for循环 根据条件控制显示或隐藏
vue系列文章（1）：对象绑定，属性绑定
D.K专栏
07-05 1269
html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue"></scri...
Vue使用v-for与v-if搭配满足条件进行赋值，和v-if三目表达式的使用
Java小皮孩
12-12 9323
Vue使用v-for遍历的时候，通过{{}}进行赋值 {{user.companyName = item.companyName}} <select class="form-control" v-model="user.companyId"> <!-- 遍历所有的公司信息 --> <template v-for="item in allCompany"> <option :value="item.companyId" v-if="u
vue:v-if v-for条件列表渲染详解
zxcve的博客
06-20 3163
vue基础条件渲染解析
【Vue】条件与循环语句 | v-if v-show v-for实例
热门推荐
Create value with coding
12-08 1万+
条件与循环语句 引言 在前端开发之中, 灵活的控制渲染是很有必要的，快速构建也是很有必要的，条件渲染和循环渲染，在视图构建中起着重要作用. 条件语句 v-if v-if 指令用于条件性地渲染内容 此内容只会在指令的表达式返回除了 false，0，""，null，undefined 和 NaN 外的值的时候被渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
Vue中控制v-for循环次数的实现方法
10-17
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈VUE中演示v-for为什么要加key
10-15
在Vue.js中，`v-for`指令用于遍历数组或对象并渲染多个元素。然而，在使用`v-for`时，通常建议为每一个迭代元素添加一个`key`属性，这是一个非常重要的实践，它对Vue的虚拟DOM（Virtual DOM）优化有着深远的影响。...
Vue中的v-for指令不起效果的解决方法
10-17
今天小编就为大家分享一篇Vue中的v-for指令不起效果的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue.js应用中，`v-for`循环常用于渲染列表数据。然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，...
同一标签使用v-for循环且要使用v-if判断
JackZhangCHNCHN的博客
11-25 964
同一标签使用v-for循环且要使用v-if判断
Vue条件判断及循环遍历（v-if、v-elseif、v-else、v-show、v-for）
qq_65715980的博客
08-02 3296
Vue条件判断及循环遍历（v-if、v-elseif、v-else、v-show、v-for）
Vue3中V-for按条件过滤
scyaopo的博客
11-19 396
<el-icon title="移除"><Delete @click="item.hasDel=true;"/></el-icon></td>"是":"否" }}</td><tr><td>表头
Vue(v-if,v-show,v-for)
weixin_68470780的博客
09-25 407
-
v-for 和 v-if 并用时筛选条件方法
weixin_41796631的博客
10-02 1万+
  &lt;ul id="ul"&gt; &lt;li v-for="todo in todos" v-if="todo&lt;4"&gt; {{ todo }} &lt;/li&gt; &lt;/ul&gt; &lt;script&gt; varvm=new Vue({ el:"#ul", data:{ todos:
vue v-for 跳出循环
05-18
在 Vue 的 v-for 指令中，可以使用 v-if 指令来控制循环的结束。例如，可以使用一个计算属性来判断循环是否应该继续，如果不需要继续，则使用 v-if 指令来跳出循环。 以下是一个示例代码： ```html <template> <div> <div v-for="(item, index) in items" :key="index"> <div>{{ item }}</div> <div v-if="shouldContinue(index)">Continue looping</div> </div> </div> </template> <script> export default { data() { return { items: [1, 2, 3, 4, 5], limit: 3, }; }, methods: { shouldContinue(index) { return index < this.limit; }, }, }; </script> ``` 在以上示例中，使用了一个计算属性 shouldContinue 来判断循环是否应该继续。如果 index 小于 limit，则返回 true，否则返回 false。然后在循环中使用 v-if 指令来判断是否应该继续循环。如果应该继续，则会显示 "Continue looping"，否则不会显示。这样就实现了跳出循环的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值