基于变量的 vuejs 指令

【问题标题】：vuejs directive based on variable基于变量的 vuejs 指令
【发布时间】：2017-08-21 19:29:24
【问题描述】：

是否可以动态分配指令？我想根据名为类型的变量分配成功或错误。我目前正在这样做（我想替换它）：

v-snackbar(v-if="type === 'success'", success, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbarText }}
    v-btn(flat, @click.native="snackbar = false")
        v-icon close
v-snackbar(v-if="type === 'error'", error, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbarText }}
    v-btn(flat, @click.native="snackbar = false")
        v-icon close

【问题讨论】：

你的意思是动态分配一个属性吗？这就是你的例子似乎做的事情
我想将 (v-if="type === 'success'", success) 替换为只需键入

标签： vue.js vuetify.js

【解决方案1】：

error 和 success 不是指令，它们是 v-snackbar 组件上的道具。

您可以使用布尔表达式或变量直接绑定到错误和成功道具。

v-snackbar(:error="type === 'error'", :success="type === 'success'", timeout='3000', bottom='bottom', right='right', v-model='snackbar')
    | {{ snackbarText }}
    v-btn(flat='flat', @click.native='snackbar = false')
      v-icon close

对于那些对 pug 语法感到困惑的人来说，这里是 html 格式。

<v-snackbar :error="type === 'error'" :success="type === 'success'" timeout="3000" bottom="bottom" right="right" v-model="snackbar">{{ snackbarText }}
  <v-btn flat="flat" @click.native="snackbar = false">
    <v-icon>close</v-icon>
  </v-btn>
</v-snackbar>

查看 vuetifyjs 网站上的示例 2 以获得更完整的示例。 https://vuetifyjs.com/components/snackbars

【讨论】：