Vue自定义指令

先说一下实现的效果

使每一个标题的颜色不一样

<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);
        }
    }
}