vue 展示对象中的键值对(转载)

内容

比如一个对象

const activitys = {
  活动一: '打王者荣耀',
  活动二: '打和平精英',
  活动三: '打把CF',
  活动四: '开个网吧模拟游戏',
}

想要在页面上这样展示

活动一: '打王者荣耀'
活动二: '打和平精英'
活动三: '打把CF'
活动四: '开个网吧模拟游戏'

则这样写

<div class="content-column" v-for="(val, key) in activitys" :key="key">
  <span class="content-title">{{key}}：</span>
  <span class="content-words">{{val}}</span>
</div>

.content-column {
  opacity: 0.65;
  box-sizing: content-box;
  margin-left: 20px;

  .content-title {
    font-size: 16px;
    font-family: SourceHanSansCN-Regular, sans-serif;
    font-weight: 400;
    color: #fff;
    float: left;
    opacity: 0.7;
  }

  .content-words {
    text-align: left;
    font-size: 16px;
    font-family: DIN-Regular, sans-serif;
    font-weight: 400;
    color: #fff;
    opacity: 0.7;

    .content-unit {
      font-family: SourceHanSansCN-Regular, sans-serif;
      margin-left: 5px;
      color: #9a9a9a;
    }
  }
}

方案 2：

<div class="line" v-for="(key, index) in Object.keys(ClassData)" :key="index">
  <span class="content-title">{{key}}</span>
  <span class="content-words">{{ClassData[key]}}</span>
</div>

最后

十分感谢原博主,原博客的地址如下:
https://blog.csdn.net/yh8899abc/article/details/109358080

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/articles/14278301.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！