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

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

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

相关阅读

相关 Echarts折线图分段用不同颜色显示

json格式是数组的时候 [ ["2000-06-05", 116], ["2000-06-06", 129], ["

你的名字/ 2022年12月24日 01:00/ 0 赞/ 384 阅读

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

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

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

相关 mac下Terminal中不同文件类型不同颜色显示

Terminal 下不同类型的文件显示不同的颜色 Terminal 默认的 shell 是 bash (提示符是 $) 在 ~ 先建立一个文件 ~/.bash\_pro

傷城~/ 2022年09月25日 15:14/ 0 赞/ 444 阅读

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

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

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

相关 js随机产生不同颜色

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

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

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

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

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

相关随机颜色

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

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

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

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

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

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

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

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

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

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

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