vue编写一个使用修饰符的实例

<template>
<div>
<p v-bold>这里使用了自定义修饰符</p>
<p v-center>这里使用了自定义修饰符</p>
</div>
</template>

<script>
export default {
directives: {
bold: {
bind(el) {
el.style.fontWeight = 'bold';
}
},
center: {
bind(el) {
el.style.textAlign = 'center';
}
}
}
};
</script>

<style>
p {
font-size: 20px;
}
</style>

在上面的代码中，我们定义了两个自定义修饰符 `v-bold` 和 `v-center`。当这些修饰符被应用到一个元素上时，它们会触发相应的指令函数，分别改变元素的字体加粗和居中对齐样式。

在模板中，我们使用了这两个修饰符来改变两个 `<p>` 元素的样式。注意，这些修饰符都是以 `v-` 开头的，这是 Vue.js 约定的命名规范。