vue.js 字符随机显示不同的颜色

以你之姓@ 2022-02-28 20:18 656阅读 0赞

以一个页面名称为例

html源码：

<div id="All">
        
        <div id="head">
            <p class="head_Name" v-for="word in words">    //v-for遍历js中的数组
                {
       {word}}
            </p>
        </div>
    </div>
    </body>

css源码：

#head{
        width: 100%;
        height: 100px;
        background-color: #8ba4d8;
        opacity:0.5;
        border-radius: 10px;
    }
    #head p{
        float: left;
        margin-top: 20px;
        margin-left: 20px;
        font: 25px bold 幼圆;
    }

js源码（vue.js&jquery）:

var head_name = new Vue({
        el: "#head",
        data: {
            words: ['爆', '米', '花', '的', '儿', '童', '乐', '园'],
        },
        mounted:function(){                                //自动加载add.color（）方法
            this.addColor();
        },
        methods:{
            addColor: function(){
                var i=1;
                var color = ["pink","black","yellow","red","orange","green"];   //可取颜色数组
                $("#head p").each(function(){                                   //遍历每个p元素，并每个都设置索引值
                    this.setAttribute("index",i);
                    var colorIndex = parseInt(Math.random() * color.length);     //随机获取颜色数组中元素的下标
                    var colorThis = color[colorIndex];
                    $(this).css("color",colorThis);                              //将获得的颜色加到现在正在访问的p元素上
                    i++;                                                          //接下来访问的p元素，索引值加1
                })
            }
        }
    })

效果图：

![20190322154812834.png][]

再次刷新，随机切换颜色：

![20190322154903614.png][]  ![20190322154939270.png][]

[20190322154812834.png]: /images/20220301/3886836015604e229e28063e2cd184ca.png
[20190322154903614.png]: https://img-blog.csdnimg.cn/20190322154903614.png
[20190322154939270.png]: /images/20220301/4603f94860c545a1b53788f4c71b8279.png

发表评论取消回复

表情：

评论列表（有 0 条评论，656人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet 加载geojson数据,随机显示不同颜色的circleMarker

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第086个 [点击查看专栏目录][Link 1]

灰太狼/ 2024年03月26日 12:00/ 0 赞/ 82 阅读

相关 SecureCRT 设置输出文字、不同文件类型显示不同的颜色

[ ][Link 1] 版权声明：本文为博主原创文章，遵循[ CC 4.0 BY-SA ][Link 1]版权协议，转载请附上原文出处链接和本声明。本文链接： [http

╰+哭是因爲堅強的太久メ/ 2023年06月12日 04:16/ 0 赞/ 22 阅读

相关 highCharts分段显示不同颜色、线条样式

主要是通过series下面的zones控制。[官方文档链接][Link 1] [点击查看在线例子][Link 2] ![在这里插入图片描述][watermark_typ

迈不过友情╰/ 2022年10月26日 14:19/ 0 赞/ 265 阅读

相关 echarts 折线分段（值）显示不同颜色

原文出处：[https://blog.csdn.net/qq\_36128699/article/details/77878438 （建义阅读原文）][https_blog.c

向右看齐/ 2022年05月19日 00:42/ 0 赞/ 951 阅读

相关 js随机产生不同颜色

方法一（随机RGB颜色值）\\\\\ //颜色对象 function getRandomColor(){ this.r = Math.f

迈不过友情╰/ 2022年05月18日 07:14/ 0 赞/ 450 阅读

相关 linux中显示有颜色的字符......

用echo命令打印带有色彩的文字： -------------------- ehco -echo 显示带颜色，需要使用参数-e 格式如下： echo

男娘i/ 2022年05月16日 03:27/ 0 赞/ 299 阅读

相关随机颜色

随机颜色开发工具与关键技术：JavaScript 作者：陈希雄撰写时间：2019/2/19 提醒：其实也可以拼接成自己想要的图形或者文字操

Love The Way You Lie/ 2022年03月18日 03:56/ 0 赞/ 239 阅读

相关 vue.js 字符随机显示不同的颜色

以一个页面名称为例 html源码： <div id="All">  <div id="head">

以你之姓@/ 2022年02月28日 20:18/ 0 赞/ 657 阅读

相关 cygwin 命令别名及不同文件类型显示不同的颜色

正常情况下，我们的cygwin安装好之后，不管是文件还是文件夹显示的颜色都是一样的，这样在我们平时的工作中很不方便所以这里记录一下怎么设置成彩色的，其实很简单。原来的样

﹏ヽ暗。殇╰゛Y/ 2022年01月21日 09:27/ 0 赞/ 428 阅读

相关 Mac 终端不同文件显示颜色

Mac 终端不同文件显示颜色参考资料：[http://jingyan.baidu.com/article/22fe7ced2f651c3002617f20.html][ht

港控/mmm°/ 2022年01月11日 08:47/ 0 赞/ 393 阅读