以一个页面名称为例
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
})
}
}
})
效果图:
再次刷新,随机切换颜色: