你如何强制 Vue 使用 v-bind 显示虚假属性？答案

【问题标题】：How do you force Vue to show falsey attributes using v-bind?你如何强制 Vue 使用 v-bind 显示虚假属性？
【发布时间】：2017-12-25 12:43:02
【问题描述】：

<button class="navbar__dropdown-toggle" :aria-expanded="active"></button>

我正在尝试将aria-expanded 绑定到下拉菜单的状态。不幸的是，当使用屏幕阅读器（视障人士）时，听写并不表示它是一个非展开的下拉菜单，因为虚假属性已被删除。

有没有办法强制保留虚假属性？

【问题讨论】：

【解决方案1】：

从W3C spec 看来，aria-expanded 的值可以是真或假。所以在你的模板中你可以这样做。

<button class="navbar__dropdown-toggle" :aria-expanded="active ? 'true' : 'false'">expanded</button>

工作example。

【讨论】：

【解决方案2】：

假设你的布尔值有一个值，我更喜欢使用toString()：

<button class="navbar__dropdown-toggle" :aria-expanded="active.toString()"></button>

它很短，意图可能比其他例子更清楚。

【讨论】：

【解决方案3】：

我只是假设active 是一个变量，最直接的答案是!!active

【讨论】：