vue的自定義指令動態參數

1. 通過自定義指令中的修飾符的key作爲值，更改顯示的顏色

• 動態指令參數
  當參數是動態的時候。
  main.js

//當參數的值是動態的時候
Vue.directive('color2', {
  bind: function(el, binding) {
    el.style.color = binding.value;
  }
})
Vue.directive('color3', {
  bind: function(el, binding) {
    el.style.color = binding.arg;
  }
})

template.vue中

<template>
<div class="demo">
  <!-- value -->
  <p v-color2='purpleUser'><i class="el-icon-user-solid"></i></p>
  <p v-color2='redUser'><i class="el-icon-user-solid"></i></p>
  <p v-color2='greenUser'><i class="el-icon-user-solid"></i></p>
  <!-- arg -->
  <p v-color3:[purpleUser]><i class="el-icon-user-solid"></i></p>
  <p v-color3:[redUser]><i class="el-icon-user-solid"></i></p>
  <p v-color3:[greenUser]><i class="el-icon-user-solid"></i></p>
</div>
</template>

<script>
export default {
  data() {
    return {
      purpleUser: 'purple',
      redUser: 'red',
      greenUser: 'green'
    }
  },
  created() {},
  methods: {}
}
</script>

<style lange='scss' scoped>
p {
  display: inline-block;
  font-size: 40px;
}
</style>

• 參數是靜態的，將key的值作爲value,改變顏色
  main.js

Vue.directive('color', {
  bind: function(el, binding) {
    const color = Object.keys(binding.modifiers)[0]; //將key的值作爲value,改變顏色，Object.keys獲取key的值；
    el.style.color = color;
  }
})

template.vue中

<template>
<div class="demo">
  <p v-color.purple><i class="el-icon-user-solid"></i></p>
  <p v-color.red><i class="el-icon-user-solid"></i></p>
  <p v-color.green><i class="el-icon-user-solid"></i></p>
</div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>

<style lange='scss' scoped>
p {
  display: inline-block;
  font-size: 40px;
}
</style>

以上的方法，最終實現效果是一樣的。