先说一下实现的效果
使每一个标题的颜色不一样
<template>
<div id="show-blogs">
<h1>博客总览</h1>
<div v-for="blog in blogs" class='single-blog'>
<h2 v-rainbow>{{blog.title}}</h2>
<article>
{{blog.body}}
</article>
</div>
</div>
</template>
在自己要定义的页面中顶一个指令,名字随便取,我取的 v-rainbow ,最后在main.js中(全局的写法)
//自定义指令,不带值
Vue.directive('rainbow',{
bind(el,binding,vnode){
el.style.color="#" + Math.random().toString(16).slice(2,8);
}
})
在本页面写法(只在本页面生效)
directives:{
'rainbow':{
bind(el,binding,vnode){
el.style.color="#" + Math.random().toString(16).slice(2,8);
}
}
}