vue 里面通过v-for循环出来多个相同样式的div,根据index作为对象的属性的参数拼接取值

最新推荐文章于 2024-07-11 00:22:08 发布

原创最新推荐文章于 2024-07-11 00:22:08 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文探讨了JavaScript中.运算符（属性存在时使用）与[]运算符（属性可选，动态获取）的区别，并通过v-for循环实例展示了如何结合字符串和索引来访问对象属性。实例代码展示了如何在实时对象中动态更新电池状态显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、[ ] 和 . 的区别

1、 . 是要对象存在该属性才可赋值取出
2、 [ ] 即使对象不存在该属性也可以赋值和取出

二、v-for循环

通过 v-for=“index of number” ，number为自定义的一个数字

三、.后面不能让字符串与index进行拼接，而[ ] 里面是可以让字符串与index进行拼接。即对象[“字符串”+index]

四、代码实现

<div class="battery" style="margin-top: 10px; margin-left: 30px">
        <div class="battry-container" v-for="index of 64" :key="index">
          <div class="battery-div">
            <span class="span-left">第 {{ index }} 组 状态：</span>
            <span
              class="span-radius"
              :style="{
                'background-color':
                  realTimeObj['sinwarn' + index] == 0 ? 'green' : 'red',
              }"
            ></span>
          </div>
          <div class="battery-div">
            <span class="span-left">
              <img class="battery-img" src="@/assets/image/battery.png" />
            </span>
            <span class="span-right">
              {{ realTimeObj["sinvol" + index] }} (V)</span
            >
          </div>
          <div class="battery-div">
            <span class="span-left">
              <img class="battery-img" src="@/assets/image/resistance.png" />
            </span>
            <span class="span-right">
              {{ realTimeObj["sintemp" + index] }} (℃)</span
            >
          </div>
          <div class="battery-div">
            <span class="span-left">
              <img class="battery-img" src="@/assets/image/temp.png" />
            </span>
            <span class="span-right">
              {{ realTimeObj["sinres" + index] }} (mΩ)</span
            >
          </div>
        </div>
      </div>