使用 v-if 根据变量的值显示 html 元素答案

【问题标题】：Using v-if to show an html element based on the value of a variable使用 v-if 根据变量的值显示 html 元素
【发布时间】：2019-08-28 08:02:12
【问题描述】：

我正在尝试根据变量的值显示<div> 元素（包含一些嵌套的<div>s）。我正在使用 v-if（如果有更好的方法，请告诉我）。

我尝试将整个 <div> 包装在 <template v-if> 中（根据 https://vuejs.org/v2/guide/conditional.html 的建议），但这不起作用，我使用 devtools 来验证我的变量是否被准确设置。

<div v-if="myVar == 'option1' || 'option2'" class="...
     <div>...
     </div>
</div>

即使myVar 不等于option 1 或option 2，该元素仍然可见。

编辑：我将 v-if="myVar=='option1'" 添加到 <img> 中，它按预期运行 - 是否有关于 or(||) 的内容我使用不正确？

【问题讨论】：

标签： html vue.js

【解决方案1】：

我需要列出myVar 两次（如下）。它现在可以正常工作了。
<div v-if="myVar=='option1'||myVar=='option2'" class="... <div>... </div> </div>

【讨论】：

【解决方案2】：

在 JavaScript 中，|| 如果第一个操作数是真值，则生成第一个操作数的值；如果第一个操作数不是真值，则生成第二个操作数的值。
因此，'option1' || 'option2' 将始终生成 'option1'（请阅读下文）。

一些注意事项：

切勿使用reserved words（即var）来命名您的函数或变量。
表达式'option1' || 'option2' 将始终返回'option1'，因为'option1' 是一个String，其中length 大于0，因此是一个真实的表达式。您可能正在寻找

v-if="['option1', 'option2'].indexOf(varName) > -1"

...相当于

v-if="varName === 'option1' || varName === 'option2'"

...其中varName 是保存您在var 中放入的任何内容的变量 - 需要重命名（改为varName 或您选择的任何其他名称，保留字除外）。

不惜一切代价避免使用松散的比较。（使用=== 而不是==）。它们为极难追踪的错误打开了大门。最好将变量转换为特定类型，然后允许它们具有多种类型的值。
当条件变长时，最好使用计算属性或方法（一个好的经验法则是：当您需要超过 2 个操作数时，使用计算/方法）。
当您不需要传递任何参数而方法允许传递参数（即：v-for 中的当前项）时，使用计算属性。

【讨论】：