Vue中文字不规则排列

最新推荐文章于 2024-10-06 11:26:26 发布

qq_751434992

最新推荐文章于 2024-10-06 11:26:26 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_42006353/article/details/84643416

Vue 专栏收录该内容

6 篇文章

订阅专栏

预览

templete

<ul class="content">
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">灯光</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">声音</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">太快</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">问题</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">速度</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">问题</li>
                <li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}">速度</li>
              </ul>

methods

activeColor() {
      var color = [
        '#2d8cf0',
        '#2db7f5',
        '#19be6b',
        '#ff9900',
        '#ed4014',
        '#17233d'
      ]
      var i = Math.floor(Math.random() * 6)
      return color[i]
    },
    // 高频词汇动态文字大小
    fontSize() {
      return 16 + Math.random() * 10
    },
    // 高频词汇动态文字位置
    top() {
      return Math.random() * 25
    },