<template>
    <div>
        <img v-directive:dynamic_literal />
    </div>
</template>

例如,dynamic_literal='ok'

Vue.directive('directive', {
    bind(el, binding) {  binding.arg  // should return 'ok'

如何使用dynamic_literal作为变量或常量,其值应在data或prop下指定.

我try 了v-directive:{{dynamic_literal}}和:v-directive="dynamic_literal"但没有用.

提前谢谢!

推荐答案

有点晚了,但也许有点用...通过使用传递给指令挂钩函数的vnode参数,实际上可以在Vue指令中获取动态参数.我们将使用参数本身作为要在vnode上下文中访问的属性名.例如,这也适用于计算(computed)属性.

Vue.directive('directive', function(el, binding, vnode){
    el.innerHTML = vnode.context[binding.arg];
});

new Vue({
    el: '#app',
    template: '<div v-directive:argument></div>',
    data: {
        argument: 0
    },
    mounted() {
        setInterval(() => ++this.argument, 1000);
    }
});

(此处使用function shorthand表示指令)

JSFiddle

Vue.js相关问答推荐

Vue 3 / Vuetify 3:如何为按钮设置全局默认 colored颜色

vue 计算的 ant watch 不会在嵌套属性更改时触发

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

指定一个 vue-cli vue.config.js 位置

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

Vuetify 容器不会填充高度

如何在某些异步数据(在 Vuex 存储中)加载之前防止任何路由?

Vuejs在复选框 Select 上切换div可见性

Vue路由安全

在 v-for 循环中使用 v-model

Vue Cli 3 不允许我在 Webpack 中处理 SVG

为 Vue 组件动态添加属性

vue 3 使用 Vuex 和路由的服务器端渲染

'vue' 未被识别为内部或外部命令

Vue如何将动态ID与v-for循环+字符串中的字段连接起来?

Vuetify 数据表不显示数据

Vue.js 单向绑定表单

使密码字符隐藏在 Vuetify 字段中

从 vuex 存储访问 $vuetify 实例属性

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式