vue.js 字符随机显示不同的颜色-蒲公英云

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

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

以一个页面名称为例

html源码：

<div id="All">
    <!--head-->
    <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
            })
        }
    }
})