Vue.js 3如何设置无值动态属性？求解决方案

嘿，我完全懂你的感受！原生JS里直接操作DOM添加/移除无值属性确实很直观，但Vue的声明式语法需要换个思路——不过Vue 3里其实有个非常直接的解决方案，你可能只是没把它和无值属性的特性联系起来～

首先要明确：像Quasar的outlined这类无值属性，本质上属于布尔属性——HTML里这类属性只要存在就代表true，不存在就是false。Vue 3里针对这类属性的动态控制，用v-bind（也就是简写的:）就可以完美解决：

把你原来写死的outlined，换成动态绑定到你的变量item.design上就行：

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

这里的逻辑很简单：

• 当item.design为true时，Vue会在最终渲染的DOM里加上outlined这个无值属性；
• 当item.design为false、null或者undefined时，这个属性会被完全移除，不会出现在DOM中。

如果你的场景更复杂——比如需要根据变量动态切换不同的无值属性（比如有时候用outlined，有时候用filled），还可以用对象语法的v-bind：

<q-input
  v-bind="{ outlined: item.isOutlined, filled: item.isFilled }"
  v-model="data.value"
  maxlength="12"
  class="super-small subshadow-25"
/>

这种写法会根据对象里的布尔值，自动添加对应的无值属性，非常灵活。

其实这个语法在Vue 2里也存在，Vue 3完全兼容，只是可能你之前看的示例没专门针对无值属性做说明～

内容的提问来源于stack exchange，提问作者Ben Jerry