VueJS如何仅在数据变量为true时绑定属性？

嘿，针对你想在isItemSelected为true时才绑定:color="$primaryColor"的需求，在Vue里有几种简洁的实现方式，我给你拆解一下：

• 三元表达式直接绑定
  这是最直接的写法，通过三元判断来决定属性值：

  <!-- 第4行的目标元素 -->
  <your-element :color="isItemSelected ? $primaryColor : undefined"></your-element>
  

  原理是：当isItemSelected为true时，color会绑定$primaryColor；当条件不满足时，我们给它赋值undefined，Vue会自动忽略值为undefined或null的属性绑定，这样color属性就不会出现在DOM元素上。

• 动态对象绑定（适合多条件属性场景）
  如果之后你需要给这个元素添加更多条件绑定的属性，用对象的方式会更清晰：

  <your-element v-bind="isItemSelected ? { color: $primaryColor } : {}"></your-element>
  

  这里当条件满足时，我们传入包含color属性的对象；不满足时传入空对象，自然就不会绑定任何额外属性。

另外要注意，确保$primaryColor是当前组件可访问的变量——如果是全局注册的样式变量（比如在Vue CLI或Vite里配置的），直接用就没问题；如果是组件内部定义的，记得确认它的作用域。

内容的提问来源于stack exchange，提问作者Rafael de Azeredo