没有值的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="outlined"
  :filled="filled"
  v-model="data.value"
  maxlength="12"
  class="super-small subshadow-25"
/>

// script (options api)
data() {
  return {
    item: {
      design: 'filled',
    },
    data: {
      value: null,
    },
  };
},

computed: {
  filled() {
    return this.item.design === 'filled';
  },
  outlined() {
    return this.item.design === 'outlined';
  },
}

Answer 2

查看以下代码片段，您可以将 true/false 传递给绑定属性：

 const { ref, computed } = Vue const app = Vue.createApp({ setup () { const data = ref({value: null}) const item = ref({design: 'filled'}) const design = (type) => { return item.value.design === 'filled'? 'outlined': 'filled' } return { data, item, design } } }) app.use(Quasar) app.mount('#q-app')

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css"> <div id="q-app"> <div class="q-pa-md"> <q-btn color="white" text-color="black" label="toogle design" @click="item.design = item.design === 'filled'? 'outlined': 'filled'" > </q-btn> <q-input:filled="design(item.design)":outlined="design(item.design)" v-model="data.value" maxlength="12" class="super-small subshadow-25" /> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.umd.prod.js"></script>