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

以你之姓@ 2022-02-28 20:18 711阅读 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 条评论，711人围观）

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

相关阅读

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

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

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

相关 leaflet 显示不同颜色的点划线（123）

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

亦凉/ 2024年03月24日 10:05/ 0 赞/ 66 阅读

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

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

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

相关 linux 配置文件不同颜色,Ubuntu配置Vim及不同语法显示不同颜色

Ubuntu配置Vim及不同语法显示不同颜色第一步、安装vim 命令为：sudo apt-get install vim 第二步、更改vim的配置文件etc/vim命令为

亦凉/ 2023年01月20日 15:54/ 0 赞/ 96 阅读

相关 js随机产生不同颜色

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

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

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

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

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

相关随机颜色

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

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

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

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

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

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

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

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

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

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

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