Vue自定义指令

转载于 2019-06-19 11:55:00 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sea-breeze/p/11050472.html

文章标签：

#javascript #ViewUI

博客提及了main.js和App.vue，还展示了其运行效果，内容转载自https://www.cnblogs.com/sea-breeze/p/11050472.html ，与前端开发相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.js

import Vue from "vue";
import App from "./App.vue";

Vue.directive("font", {
  bind(el, binding, vnode) {
    console.log(binding);
    el.style.fontFamily = binding.arg==='micro'?'Microsoft Yahei':'Arail';
    el.style.fontWeight = binding.modifiers.bold ? "bold" : "";
    el.style.fontStyle = binding.modifiers.italic ? "italic" : "";
    el.style.color = binding.value;
  }
});

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <div v-font:micro.bold.italic="color">加勒比海盗</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data: () => {
    return { color: "gold" };
  }
};
</script>

<style>
</style>