您可以在属性上使用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';
  },
}

看一下下面的代码片段，你可以将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>