vue的v-if实现静态布局的循环出现

最新推荐文章于 2024-04-13 07:09:45 发布
最新推荐文章于 2024-04-13 07:09:45 发布
阅读量483 收藏
点赞数
分类专栏： vue教程 文章标签： vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k912120/article/details/120549188
版权
本文介绍了如何使用Vue的v-if指令来实现页面中多个相同模块的动态循环展示，每个模块仅一个小图片不同。通过核心代码示例，展示了具体实现方法并提供了最终的效果图。
摘要由CSDN通过智能技术生成

最近写页面，设计里面有很多模块布局一样，利用v-if实现循环效果。

需要注意的是：每个模块里面有一个小图片不一样。

核心代码：

 

<template>
    <div class="sched_content">
        <div class="app-alarm">
            <el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" placeholder="选择周" align="right"></el-date-picker>
        </div>
        <el-row :gutter="20">
            <el-col :sm="24" :md="24" :lg="8" :xl="8" v-for="(item, index) in 3" :key="index">
                <div class="sched_list">
                    <div class="sched_ul">
                        <img
最低0.47元/天 解锁文章
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7092
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
vue中的指令v-for循环遍历、v-if条件判断v-show,v-on事件监听、事件修饰符
sdh19981202的博客
10-03 4489
vue中的条件渲染 v-else-if 当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着 还有v-else-if指令可以实现多分支逻辑 在元素上使用v-if条件渲染分组 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。 有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类； 在元素上使用v-show条件渲
Vue 条件语句 v-if、循环语句 v-for
一起码代码
11-14 1124
条件语句 v-if 案例： <body> <div id="app"> <input type="checkbox" v-model="ok"/>是否同意 <!--条件指令 v-if v-else --> <h1 v-if="ok">现在是yes</h1> <h1 v-else>现在是false</h1> </div>
Vue 常用内置指令（v-if、v-for、v-bind、v-on）
2401_84097820的博客
04-13 451
例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。v-bind 主要用于属性绑定，比方你的 class 属性，style 属性，value 属性，href 属性等等，只要是属性，就可以用 v-bind 指令进行绑定。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。
数据扁平化之数组处理
weixin_46962787的博客
09-23 367
数据扁平化之数组处理 **假设有一个数组 const arr = [1,[2,[3,[4,5]]],6]; 如何将其从多维数组变为一维数组 方法一： 使用flat()方法 const res1 = arr.flat(Infinity); 方法二 使用reduce const flatten = arr =>{ return arr.reduce((pre,cur) => { return pre.concat(Array.isArray(cur) ? flatten(cur)
Vue基础（2）——v-for，v-if 语法
WannaRunning的博客
03-24 1350
v-for即for循环 如果遍历的对象是数组，表达式的格式为：（T，index） inList<T>，其中T是对象类型；如果遍历的目标是对象，表达式的格式为：（v,k,i）in T ,其中v是键的值，k是键，i是索引，T是对象 v-if表示判断 当表达式为true是展示标签内容，false时不展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
Vue开发-基于vue实现的简单rss阅读器项目.zip
最新发布
05-09
Vue.js的指令如`v-if`、`v-for`和`v-bind`将用于条件渲染、循环遍历和动态绑定属性。组件是Vue.js中最重要的部分，它们可以复用并封装功能，提高代码的可维护性。RSS阅读器项目可能会有`FeedList`、`FeedItem`等组件...
vue实现仿饿了么点餐静态页面.zip
10-28
- **指令**：Vue提供了诸如`v-for`（用于循环渲染商品）、`v-if`（条件渲染）和`v-model`（用于数据绑定）等指令。 - **计算属性**：用于根据其他数据动态计算结果，例如购物车总价的计算。 - **事件处理**：通过...
vue路由--网站导航功能详解
10-17
为了实现更复杂的页面布局，你可以在 `router-view` 的外部定义一些静态的布局组件，如头部 `HeaderSection`、左侧导航 `NavList`、内容区域以及底部 `FooterSection`。例如： ```html <HeaderSection></Header...
vue表格静态
Timor7hao的专栏
07-16 4192
vue+element的静态表格，可直接复用更改为自己想要的样式。 1）界面如下： 2）代码如下： <template> <div class="scene-container"> <el-card class="card1"> <el-form :inline="true" :model="fo...
vue学习笔记（v-if v-on）
weixin_50310737的博客
01-14 250
vue自学笔记
Vue 常用内置指令（v-if、v-for、v-bind、v-on），【建议收藏】
peixiancccc的博客
04-04 422
例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。v-bind 主要用于属性绑定，比方你的 class 属性，style 属性，value 属性，href 属性等等，只要是属性，就可以用 v-bind 指令进行绑定。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。
Vue的if判断和for循环:of,in
热门推荐
qq_47443027的博客
03-10 1万+
一、条件判断 1、v-if 　　条件判断使用 v-if 指令： 2、v-else 　　可以用 v-else 指令给 v-if 添加一个 "else" 块： //随机生成一个数字，判断是否大于0.5，然后输出对应信息： <div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry &l
前端人员必知的Vue.js条件v-if与列表循环v-for相关用法
qq_32506555的博客
11-17 6817
本文将继续和大家分享Vue.js的基础知识，主要是介绍Vue.js的条件v-if和列表循环v-for的相关使用，一起来看看吧，希望可以帮助大家更好的学习Vue.js。 v-if 、v-else、v-show、还可以使用template ok No ok 测试template no template 演
如何在vue中优雅地使用v-if判断
铁锤妹妹的博客
07-28 1万+
情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。 下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。 <template> <div class="card"> <img src="../../assets/image/background frame.png" /> <h3 v-if="expanded">123</h3> &lt
前端入门学习笔记（三十五）vue.js入门（三）条件 v-if 与循环 v-for，v-for 中 in 和 of 的区别
TUTsmile的博客
08-18 8026
1.v-if v-if相当好理解，这里我就只贴实例代码了 <div id="app"> <p v-if="true">现在你看到我了</p> <p v-if="false">现在你看不到我了</p> <p v-if="seen">现在看得到，因为seen为true</p> </div> &...
vue 第三天 指令之条件循环v-if和v-for
lilianggui的博客
11-12 513
上一篇说到vue的指令，指令是vue比较基础但是非常重要的知识，上篇只提到了v-bind、v-text、v-html、v-on等，这篇讨论一下编程语言不可绕开的条件和循环结构。 1、v-if的作用是控制元素的显示与隐藏，v-if后面的变量或表达式为真时，元素显示，否则隐藏。与其配合使用的指令还有v-elseif、v-else，和JavaScript的条件判断原理相同。 <!DOCTYP...
Web前端之Vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
CSDN博客主页地址：https://mengjian.blog.csdn.net/
12-18 1万+
Web前端之Vue中的v-if指令判断某个标签满足多个条件的写法、同时也适用于逻辑代码、优雅编程、includes、indexOf、String、match
Vue.js入门（条件、in循环）
AdamMaoKkk的博客
04-12 1533
简单的 if 条件 可以对元素条件控制的属性 v-if （上方代码有错误，你能找出来吗？） 如果我们把seen改成false会怎么样？ 这时候我发现我还能看见这句话？？？为什么会这样呢 打开控制台 F12 提示vue有错 再回去看一看 懂了嘛，我vue的 v 没大写。。。（丢脸，以后谨记） 好了现在再看一下 以后就可以通过这样的方式 控制元素的显现与否了 [赞] 。 。 PS: 我之前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值