VUE-33 循环不同样式

最新推荐文章于 2024-05-29 14:18:13 发布
最新推荐文章于 2024-05-29 14:18:13 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59214979/article/details/122348827
版权

本节：循环内容没问题，那么怎么循环内容里，不同的样式？

1.循环输出数据。重点：定义冒号，属性变成变量，可以循环不同的内容

2.循环的数据

3.定义变量的样式 

 完整代码：

<template>
  <div class="container">
    <div class="out">
      <!-- 保证不换行 -->
      <div>
        <div class="top">
          <!-- 头部图片 -->
          <div class="img11">
            <img class="img1" src="../../../public/image/promotionActivity/img1.png" alt="" />
          </div>
          <!--5G最新活动 -->
          <div class="topText">
            <div style="display: flex">
              <div class="mostActivity">5G最新活动</div>
              <div class="limitYouHui1">
                <div class="limitYouHuiFont">限时特惠</div>
              </div>
            </div>
            <div class="MessageService1">
              <div class="MessageService"
                >短信服务（Short Message
                Service）是广大企业客户快速触达手机用户所优选使用的通信能力。调用API或用群发助手，即可发送验证码、通知类和营销类短信；国内验证短信秒级触达，到达率最高可达99%；</div
              >
            </div>
            <div class="iconContext">
              <div class="icon1"> <img src="../../../public/image/promotionActivity/icon1.png" alt="" /></div>
              <div class="day">2021/10/01 ～ 2021/12/01</div>
            </div>

            <div class="button">
              <div class="buttonFont">参加活动</div>
            </div>
          </div>
        </div>
        <!-- 活动详情 -->
        <div class="xianqing">活动详情 </div>

        <!-- 线 -->
        <div class="line">
          <div class="lineBlue"></div>
          <div class="lineLong"></div>
        </div>
        <div>
          <div class="messageServiceContent"
            >短信服务（Short Message
            Service）是广大企业客户快速触达手机用户所优选使用的通信能力。调用API或用群发助手，即可发送验证码、通知类和营销类短信；国内验证短信秒级触达，到达率最高可达99%；国际/港澳台短信覆盖200多个国家和地区，安全稳定，广受出海企业选用。</div
          >
        </div>
        <div class="imgBig1"><img class="imgBig" src="../../../public/image/promotionActivity/img2.png" alt="" /></div>
        <div class="base5G">
          基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G专基于5G。
        </div>
        <div class="base5G2">支持多种推广内容的短信发放，例如业务推广、新产品宣讲、会员关怀等内容的短信，为提升企业产品增加曝光率提供帮助。</div>

        <div class="mostActivityTitle"> 更多活动 </div>

        <!-- 6个框 -->
        <div style="margin-top: 34px">
          <div class="piece3" style="display: flex">
            <!-- 一个框 -->
            <div class="piece1" v-for="(i, index) in contentData" :key="'i-' + index">
              <!-- 文字内容 -->
              <div class="contextTop">
                <div class="alreadEnd">
                  <div class="alreadEndFont" :class="i.statusName">{{ i.status }}</div>
                </div>
                <div class="pieceTitile">{{ i.title }}</div>
                <div class="pieceContent">{{ i.introduce }}</div>
                <div class="limitYouHui">
                  <div class="limitYouHuiFont" v-for="(i2, index) in i.preference" :key="index">
                    {{ i2.prefer }}
                  </div>
                </div>
              </div>
              <div class="pieceLine"></div>

              <!-- 查看详情 -->
              <div class="checkXianqing">查看详情</div>
            </div>
          </div>
        </div>
        <div style="margin-top: 40px; padding-bottom: 80px">
          <div class="gengDouHuoDong">
            <div class="gengDouHuoDongFont">查看更多活动</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
     contentData: [
          {
            status: '已结束',
            statusName: '',
            title: '5G建网企业方案',
            introduce: '5G建网企业方案与企业信息系统终端界面集成，基于 web客户端的界面',
            preference: [{ prefer: '限时特惠' }],
          },
          {
            status: '未开始',
            statusName: 'unStart',
            title: '5G建网企业方案',
            introduce: '5G建网企业方案与企业信息系统终端界面集成，基于 web客户端的界面',
            preference: [{ prefer: '限时特惠' }, { prefer: '爆款选购' }],
          },
          {
            status: '进行中',
            statusName: 'ing',
            title: '5G建网企业方案',
            introduce: '5G建网企业方案与企业信息系统终端界面集成，基于 web客户端的界面',
            preference: [{ prefer: '限时特惠' }],
          },
          {
            status: '已结束',
            statusName: '',
            title: '5G建网企业方案',
            introduce: '5G建网企业方案与企业信息系统终端界面集成，基于 web客户端的界面',
            preference: [{ prefer: '限时特惠' }],
          },
          {
            status: '未开始',
            statusName: 'unStart',
            title: '5G建网企业方案',
            introduce: '5G建网企业方案与企业信息系统终端界面集成，基于 web客户端的界面',
            preference: [{ prefer: '限时特惠' }, { prefer: '爆款选购' }],
          },
          {
            status: '进行中',
            statusName: 'ing',
            title: '5G建网企业方案',
            introduce: '5G建网企业方案与企业信息系统终端界面集成，基于 web客户端的界面',
            preference: [{ prefer: '限时特惠' }],
          },
        ],
      }
    }
  }
</script>

<style>
* {
    margin: 0px 0px;
  padding: 0px 0px;
}
.out {
  display: flex;
  justify-content: center;
  /* 左右居中 */
}
.img1 {
  /* src: url(../../../public/image/promotionActivity/img1.png); */
  width: 576px;
  height: 324px;
  opacity: 1;
}
.top {
  margin-top: 56px;
  display: flex;
}
.mostActivity {
  width: 130px;
  height: 40px;
  opacity: 1;
  font-size: 24px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #202020;
  line-height: 40px;
}
.topText {
  margin-left: 40px;
}
.MessageService {
  margin-top: 40px;
  width: 584px;
  height: 66px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 22px;
}
.icon1 {
  margin-right: 8px;
  width: 24px;
  height: 24px;
  opacity: 1;
  margin-top: 32px;
}
.day {
  height: 22px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 22px;
  margin-top: 33px;
}
.iconContext {
  display: flex;
}
.button {
  width: 104px;
  height: 36px;
  opacity: 1;
  background: #2d65fe;
  margin-top: 87px;
  text-align: center;
}
.buttonFont {
  width: 104px;
  height: 36px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 36px;
  background: #2d65fe;

}
.xianqing {
  width: 521px;
  height: 40px;
  opacity: 1;
  font-size: 24px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #202020;
  line-height: 40px;
  margin-top: 40px;
}
.line {
  margin-top: 20px;
}
.lineBlue {
  width: 96px;
  height: 4px;
  opacity: 1;
  background: #2d65fe;
}
.lineLong {
  /* margin-top: 4px; */
  width: 1200px;
  height: 1px;
  opacity: 1;
  border: 1px solid #d9d9d9;
}
.messageServiceContent {
  margin-top: 56px;
  width: 1200px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 22px;
}
.imgBig {
  width: 1200px;
  height: 675px;
  opacity: 1;
  margin-top: 40px;
}
.base5G {
  margin-top: 40px;
  width: 1200px;
  height: 44px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 22px;
}
.base5G2 {
  margin-top: 24px;
  width: 1200px;
  height: 22px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 22px;
}
.mostActivityTitle {
  width: 112px;
  height: 40px;
  opacity: 1;
  font-size: 28px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #333333;
  line-height: 40px;
  padding-top: 136px;
  display: flex;
  justify-content: center;
  margin: 0px auto;
  /* 左右居中 */
}
.piece1 {
  width: 380px;
  height: 229px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
  margin-top: 30px;
}
.piece2 {
  margin-left: 30px;
  width: 380px;
  height: 229px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
}
.piece3{
   width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.threePiece {
  margin-top: 30px;
  display: flex;
}

.contextTop {
  width: 356px;
  height: 181px;
  opacity: 1;
  padding-left: 24px;
}

.alreadEnd {
  width: 64px;
  height: 24px;
  opacity: 1;
  background: #a1a1a1;
  border-radius: 0px;
  line-height: 24px;
  /* display: flex;
  justify-content: flex-end; */
  float: right;
}
.alreadEndFont {
  width: 36px;
  height: 16px;
  opacity: 1;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 24px;
  margin: 0px auto;
  line-height: 24px;
}
.pieceTitile {
  clear: both;
  width: 332px;
  height: 22px;
  opacity: 1;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #333333;
  line-height: 22px;
}
.pieceContent {
  padding-top: 14px;
  width: 332px;
  height: 44px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 22px;
  padding-bottom: 32px;
}
.limitYouHui {
  display: flex;
  justify-content: left;
}
.limitYouHui1 {
  width: 64px;
  height: 21px;
  opacity: 1;
  background: #ffffff;
  border-radius: 3px;
  margin-left: 30px;
  margin-top: 8px;
}
.limitYouHuiFont {
  width: 48px;
  height: 17px;
  line-height: 17px !important;
  padding:2px 8px ;
  text-align: center;
  opacity: 1;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #2d65fe;
  line-height: 21px;
margin-left: 8px;
    border: 1px solid #2d65fe;
  border-radius: 3px;

}
.pieceLine {
  width: 380px;
  height: 1px;
  opacity: 1;
  border: 1px solid #eaeaea;
}
.checkXianqing {
  padding-top: 14px;
  width: 100px;
  height: 20px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: center;
  color: #2d65fe;
  line-height: 20px;
  margin: 0px auto;
  padding-bottom: 14px;
}
.checkXianqing:hover{
background-color: #2d65fe;
color: white;
width: 382px;
}
.ing {
  width: 64px;
  height: 24px;
  opacity: 1;
  background: #fe7532;
  border-radius: 0px;
  line-height: 24px;
  float: right;
}
.ingFont {
  width: 36px;
  height: 16px;
  opacity: 1;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 24px;
  margin: 0px auto;
  line-height: 24px;
}
.unStart {
  width: 64px;
  height: 24px;
  opacity: 1;
  background: #2d65fe;
  border-radius: 0px;
  line-height: 24px;
  float: right;
}

.unStartFont {
  width: 36px;
  height: 16px;
  opacity: 1;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 24px;
  margin: 0px auto;
  line-height: 24px;
}
.baoKuan {
  width: 64px;
  height: 21px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #2d65fe;
  border-radius: 3px;
  margin-left: 8px;
}
.baoKuanFont {
  width: 48px;
  height: 17px;
  opacity: 1;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #2d65fe;
  line-height: 21px;
  margin: 0px auto;
}

.gengDouHuoDong {
  width: 132px;
  height: 36px;
  opacity: 1;
  border: 1px solid #2d65fe;
  margin: 0px auto;
}
.gengDouHuoDongFont {
  width: 84px;
  height: 22px;
  opacity: 1;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #2d65fe;
  line-height: 36px;
  margin: 0px auto;
}
@media screen and (max-width: 750px) {
  .img11 {
    margin: 0px auto;
    width: 100vw;
    height: 211px;
  }
  .img1 {
    width: 100vw;
    height: 211px;
    /* margin-left: 300px; */
  }
  .top {
    display: block;
  }
  .topText {
    padding-top: 25px;
    margin: 0px auto;
    /* text-align: center; */
    width: 100vw;
  }
  .MessageService {
    margin: 0px auto;
    width: 90vw;
  }

  .MessageService1 {
    padding: 16px;
  }
  .mostActivity {
    margin: 0px auto;
    /* width: 100vw; */
    padding-left: 16px;
    /* padding-top: 25px; */
    white-space: nowrap;
  }
  .iconContext {
    width: 100vw;
    padding-left: 16px;
    margin-bottom: 38px;
  }
  .button {
    width: 90vw;
    height: 50px;
     margin: 0px auto;
  }
  .buttonFont {
    /* text-align: center; */
    font-size: 20px;
    margin: 0px auto;
    white-space: nowrap;
    padding-top: 6px;
  }
  .limitYouHui1 {
    margin-right: 180px;
    margin-top: 8px;
  }
  .xianqing{
    width: 90vw;
    margin: 0px auto;
    padding-top: 50px;
    color: #2d65fe;

  }
  .line{
     width: 90vw;
    margin: 0px auto;
  }
  .messageServiceContent{
      width: 90vw;
    margin: 0px auto;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .imgBig{
     width: 90vw;
    margin: 0px auto;
    height: 211px;
  }
    .imgBig1{
     width: 90vw;
    margin: 0px auto;
  }
  .base5G{
     width: 90vw;
    margin: 0px auto;
    padding-top: 25px;
  }
  .base5G2{
     width: 90vw;
    margin: 0px auto;
  padding-top: 90px;
  }
  .piece3{
  display: block;  
   width: 90vw;
    margin: 0px auto;
  
}

}
</style>

V_zcm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
05-vue-条件循环渲染样式
m0_57103348的博客
08-30 349
1.使用的变量为true就显示,false就隐藏。2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果。3.v-if的做法是删除节点,v-show做法是操作css的display:none。2.在vue2.0中,v-if和v-for写在一起时候会出现的问题(面试)v-if具有较高的 切换消耗,常常用在用户不常切换的模块。v-show具有较高的性能消耗,常常用在频繁切换的模块中。切换模块，它的属性值等会占用内存，更高的内存消耗。根据它们底层的设计不一样有各自的使用场景。...
vue——如何给v-for循环出来的元素设置不同的样式
weixin_44613294的博客
01-23 1万+
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 &amp;lt;div v-for=&quot;(i,a) in serve&quot; class=&quot;sever_box2&quot;&amp;gt; &amp;lt;div :class=&quot;sstt[a]&quot;&amp;gt; &a
vue中使用scss循环定义边距样式，方便开发简写使用
最新发布
WeiXing53207777的博客
05-29 176
可以通过 修改 0 through 30 来修改使用的范围值。
vue循环样式切换
weixin_53944118的博客
01-12 576
vue循环渲染的样式切换（单选，多选） 单选 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <title>vue循环渲染样式切换</title&
vue中数组常用的六种循环方法
A1123352950的博客
09-04 9297
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some()
解决vue-photo-preview 异步图片放大失效的问题
10-15
在Vue.js开发过程中，我们经常需要使用图片预览功能，而`vue-photo-preview`是一个常用的图片预览插件。然而，当处理异步加载的图片时，可能会遇到图片放大失效的问题。本文将详细探讨这个问题，并提供解决方案。 ...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
如果我们想要为`v-for`循环中的每个元素设置不同的静态样式，比如背景色，我们可以按照以下步骤操作： 1. **动态绑定类名**：在循环的元素上使用`:class`指令并传入一个数组。例如，对于四个盒子，我们可能有如下...
tts-vue-1.9.0 语音合成
05-23
"tts-vue-1.9.0"是一款基于Vue.js框架开发的开源语音合成功能库，专为学习和教育目的设计。Vue.js是一个轻量级、高性能的前端JavaScript框架，它以其组件化开发模式、简洁的API和易于上手的特性受到开发者们的广泛...
vue-draggable 生成调查问卷
09-22
Vue.Draggable是一款在Vue.js生态中广泛使用的第三方库，它允许开发者轻松地实现...在实际应用中，你可能还需要考虑更多细节，如错误处理、数据验证以及样式美化等，但Vue.Draggable无疑为这些任务提供了坚实的基础。
vue-video-play.rar
11-20
此外，Vue Video Play可能还支持自定义样式和扩展功能，允许开发者根据项目需求进行二次开发。这通常涉及到CSS样式覆盖、使用插槽添加自定义元素，或者通过组件提供的API扩展其功能。 总的来说，Vue Video Play是一...
vue 给v-for循环出来的元素设置不同样式 (通过样式隐藏v-for循环的第一个元素)
q249859693的博客
05-12 964
vue 给v-for循环出来的元素设置不同样式 html代码 <div style="display: flex;align-items:center;color:#2351F3" v-for="(item,index) in List" :key="index"> <i :class="'listIcon'+(index+1)" style=" font-size: 20px;" class="el-icon-right"></i> <el-button
vue v-for循环中如何给部分元素添加事件和样式
Zed_GM的博客
08-06 4177
统一添加样式很简单，下面看下给单独某个循环出来的元素添加事件和样式。 <template> <div id="bbottom" class=""> <div class="bottom"> <div class="title"> <el-breadcrumb separator-class="el-ico...
Vue中的v-for循环，实现div块的循环生成
热门推荐
qq_58372242的博客
03-09 1万+
前言 大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题，说来也不难，但还是花费了我的好些时间，保持习惯记录一下。在前端学习中不免遇到一个div或者一个数组的循环产生，因为挨个儿传数据显然不是最优的。这里讲述的是Vue中的 v-for循环，生成的是div块。 HTML v-for，可以循环普通的数组，数字，对象。这些在其他优秀博主那里会得到非常详细的介绍，参考如下： http://t.csdn.cn/aBwsD 我就不做赘述啦。 简单说明一下，当前的页面只有一个div块级元素，需求是
在VUE项目中如何用v-for循环对象
sunshineTing2的博客
09-30 1万+
VUE： v-for循环对象 (val, key, index) 分别代表 (值， 键， 索引) <div v-for="(val, key, index) in list"> <span>值：{{ val }}</span> <span>键：{{ key }}</span> <span>索引：{{ index }}</span> </div> list: { '1': 'name', '2':
scss如何循环创建样式
qq_22481733的博客
08-09 842
代码】scss如何循环创建样式。
vue实现动态获取左侧导航宽度，右侧内容动态改变margin值
可可爱爱的你吖的博客
08-26 3507
vue实现动态获取左侧导航宽度，右侧内容动态改变margin值
vue v-for循环不同样式/控制显隐
Jadeyqc的博客
06-28 902
通过 :style = "函数()" 或者:class="函数" 可以通过函数加传参来控制不同列的样式。 <div class="start" v-for="(list,index) in lists" :key="list.id" :style.prevent="aa(list.size)" ref="list"> <div :class="className(list.id)" :style="{fontSize:list.size+'px'}">.
【vue】指定v-for循环显示前3个
weixin_45319500的博客
01-13 5923
<div class="i-column" v-for="(item, index) in commodityList"> <div class="index_show_item" @click="turn('List')" v-show="index<3"> </div > </div >
vue-awesome-swiper 循环播放失效
04-07
如果你使用 vue-awesome-swiper 循环播放出现失效的问题，可能是以下原因： 1. 没有设置 loop 属性：在使用 vue-awesome-swiper 进行循环播放时，需要设置 loop 属性为 true，否则循环播放将失效。 2. 数据源不够...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值