Vue 自定义指令

<template>
  <div id="app">
    <p> v-css="{color:'red'}">hello world</p>
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'
import Coma from './components/a'
import Comb from './components/b'
Vue.directive('css',{
  inserted(el,binding){
    // console.log(el,binding);   binding 拿到value
    let styleObj=binding.value;
    let arr=[];
    for(let key in styleObj){
      //遍历 key value  color  red
      arr.push(key+':'+styleObj[key]);
    };
    arr=arr.join(';');
    el.style.cssText=arr;
  }
})
export default {
  components:{
    Coma,Comb
  },
  data() {
    return {
      currentView:'Coma',
      myValue:'',
       myVal:'',
      show:"",
    }
  },
  computed:{

  },

  methods:{
  
      
    
  }
};
</script>
<style>
.animate-p{
  position: absolute;
  top: 0;
  left: 0;
}
</style>