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>

以上的方法，最终实现效果是一样的。