Vue自定義指令

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>

 

運行效果