没有值的vuejs3动态属性

Question

如何在 vuejs3.js 中设置动态属性？ Vanilla js 要容易得多，但在 Vue 中这显然并不明显。

我希望能够将变量用作属性。

是这样的：

  <q-input
     outlined <---(This must be variable "item.design" without any value)
     v-model="data.value"
     maxlength="12"
     class="super-small subshadow-25"
   />

我已经阅读了一些示例和文档，但这些示例主要针对 vuejs2。

我想念什么吗？

Answer 1

您可以在属性上使用v-bind:（或简写:），将数据变量绑定到属性上同样容易：

<q-input
  :outlined="my_var"
  v-model="data.value"
  maxlength="12"
  class="super-small subshadow-25"
/>

// script
data() {
  return {
    my_var: false,
    value: 'asdf',
  };
}